리액트에선 웹 페이지에 들어갔을 때 내용물을 표시하는 것을 자바스크립트 코드를 이용한 JSX로부터 받은 정보를 통해 컴포넌트를 렌더링한다.

컴포넌트

컴포넌트는 템플릿보다 더 많은 기능을 가지는데, 데이터를 가지고 UI를 만들어주는 것(템플릿의 기능)과 더불어, 라이프사이클 API를 이용해 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다. 또 임의 메소드를 통해 특별한 기능을 제공할 수 있다.

렌더링

이 컴포넌트를 UI로 만들어 렌더링하기 위해 render()라는 함수를 사용한다. (클래스형 컴포넌트의 경우)
이 render() 함수는 JSX코드를 리턴한다.

JSX

JSX는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 담고 있는 객체이다.
이 객체 안의 코드 속에 컴포넌트에 대한 정보가 들어있는데, 가장 바깥 컴포넌트부터 내부까지 재귀적으로 렌더링을 진행한다. 최상위 컴포넌트의 렌더링이 끝나면(최상위 => 최하위 => 최상위) 렌더링을 통해 얻어낸 정보들로 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다.

함수형 컴포넌트 vs 클래스형 컴포넌트

클래스형 컴포넌트는 state기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메소드를 정의할 수 있다.

그럼 함수형은 개 꾸진거 아닌가요?

그것을 해결하기 위해 나온게 hooks인데, 일단 이 얘기는 나중에 하겠다.
클래스형 컴포넌트에서는 render() 함수가 꼭 있어야 한다.

컴포넌트 생성

컴포넌트 생성을 위해선 우선 파일을 만들어야 한다.
어떤책에선 이 파일을 구분하기 쉽게 하려고 .jsx로 만들던데, .js로 만들어도 아무 지장없다. 단 일반 자바스크립트 파일과 다르다는 점을 강조하기 위해 보통 대문자로 이름을 짓는다.

함수형 컴포넌트의 경우

import React from 'react';

function Example(){
  return <div>컴포넌트 생성</div>;
}

export default Example;

와 같이 코드를 작성한 다음 App 컴포넌트 혹은 index.js파일이나 아무튼 App의 하위에 들어있는 컴포넌트에서 import해서 JSX코드 안에 작성하면 컴포넌트를 생성할 수 있게 된다.

props

상위 컴포넌트로부터 어떤 readonly값을 받아와 하위 컴포넌트에서 사용하는 값을 말한다.
하위 컴포넌트를 부르는 컴포넌트에서 값을 지정해준다.

상위 컴포넌트에서 하위 컴포넌트를 부를때 <컴포넌트명></컴포넌트명> 이런식으로 부르는데,
<컴포넌트명 props이름={props값}></컴포넌트명>로 써주면 된다.

그리고 태그사이에 들어가는 문자열이나 하위 컴포넌트는 props.children으로 사용할 수 있다.

하위 컴포넌트에서는 예를 들어 상위 컴포넌트가 text, price, kind라는 props를 줬을 경우

import React from 'react';

function Example({text, price, kind}){
  return(
    <h1>{text}</h1>
    <h2>{price}</h2>
    <h3>{kind}</h3>
  );
}

export default Example;

다음과 같이 비할당화 구조(Destructuring)로 props를 붙이지 않고 편하게 사용할 수 있다.

state

부모 컴포넌트가 설정한 값대로 사용해야 했던 props와 달리 컴포넌트 내부에서 바뀔 수 있는 state가 있다.

함수형 컴포넌트에선 useState() hooks를 통해 state를 사용하고,
클래스형 컴포넌트에선 그냥 state자체를 사용한다.

클래스형 컴포넌트의 state

방법 1 생성자 함수

클래스형 컴포넌트의 경우 생성자 함수를 통해 state를 설정할 수 있다.

constructor(props){
  super(props);
  this.state = {
    number: 0,
  };
}

위를 보며 알 수 있듯 state는 하나의 객체이므로 key : value, 형태로 작성되어야 한다.
이렇게 설정한 number의 값을 변경하려면 this.setState()를 사용해 변경한다.
값을 단순히 조회만 하려면 this.state를 가져와 비구조화 할당을 통해 변수에 넣어줄 수 있다.

방법 2 그냥 state 사용

생성자 함수를 쓰지 않고 다음처럼도 쓸 수 있다.

state = {
  number: 0,
};

함수형 컴포넌트의 state

함수형 컴포넌트의 경우 useState() hooks를 사용하는데, 배열 비구조화 할당을 사용한다.

const [number, setNumber] = useState(0);

다음과 같은 형태이고 함수의 매개변수로는 초기값이 들어가고,
setNumber의 경우 number를 설정해주는 setter함수이다.
이 setter함수는 값을 변경해주는데 쓰이는 데, useState()에 들어온 매개변수가 그냥 값인 경우 그 값으로 바꿔주기도 하고, 함수를 넣어주기도 하는데, 이것은 함수를 통해 객체를 리턴해주는, 클래스형 컴포넌트의 setState()와 유사한 성격을 띈다.