React 첫 시작

지금부터 한번에 올라가는 리액트 관련 지식들은 내가 블로그를 옮기는 과정이다,,, 노션은 뭔가 페이지 다루는게 너무 힘들당,,^-^

<npm / create-react-app 다운로드 후에 하기>

1. Component

• component란 쉽게 html, css은 아니지만 이들과 유사한 코드를 클래스처럼 묶어놓은 것이다
• React를 사용할 때에는 component를 class 또는 함수로 정의할 수 있다.
• 클래스를 정의하기 위해서는 React.Component를 상속받아야 한다.

Example

import React, { Component } from 'react';

class Content extends Component{
    render(){
      return(
        <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
      </article>
      );
    }
  }

export default Content;

render(): React.Component의 하위 클래스에서 반드시 정의해야 하는 메서드.

이 메서드가 호출되면 this.props / this.state(아래 참고)의 값을 활용해 아래의 것 중 하나를 반환해야함. 이 메서드는 application의 역할을 한다. <주의> 꼭 하나의 component만은 render 해야 한다!!!

-React element

-Array / Fragement

-Portal

-문자열과 숫자

-Boolean / null

export default —; : 외부에서도 이 컴포넌트를 사용할 수 있도록 해줌.

<주의>

반드시 class 문법을 사용할 필요는 없음. 그냥 function을 사용해도 가능하지만 render메서드를 정의하기 편함을 위해 class가 더 편했음.

2. Constructor

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됨.

<React에서 생성자의 역할>

• this.state에 객체를 할당해 지역 state를 초기화.
• 인스턴스에 이벤트 처리 메서드를 바인딩.

Example

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      subject:{title:'WEB', sub:'world wide WEB!'},
      contents:[ //배열 형태
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    } //state값 초기화
  }

-super(props) : this.props가 생성자 내에서 정의되도록 하기 위해 호출해야 한다.

3. props와 state

• props : 태그의 속성을 문법적으로 제공해 사용자가 조작할 수 있도록 하는 정보
• state : 컴포넌트의 내부적인 정보

추가적으로

두 정보는 항상 철저히 분리되어 있어야 한다.

상위 컴포넌트의 state값을 하위 컴포넌트의 props의 값으로 전달하는 것은 항상 가능하다!