State

우린 어떠한 값을 담기 위해 변수라는 것을 사용했다 예를 들면 이런 것들말이다.

let i = 120;
const arr = [1, 2, 3];

이미 알다시피 변수의 선언 방법의 차이가 있지만, i와 arr 라는 변수에 각각 Number형 변수와 Array형(정확히는 배열도 Object(객체)형이다. 일단은 배열 이라고 하자)변수를 할당 해준 것이다.

알던 사실과는 약간 다르게, 컴포넌트에서는 변수로 State를 사용한다. 잠시 짚고 넘어가도록 해보자.

• state : 컴포넌트에서 사용하는 변수.
• setState : 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
• useState : 컴포넌트에서 사용하는 변수(State)를 만들어주는 기능

ex)

const [name, setName] = useState(초기값)

뭐이렇게 복잡하게 변수를 선언하지,, 그냥 let, const 쓰면 안됄까요..(응 안돼)

function App() {
  let count = 0;
  const increase = () => {
    count = count++
  }
  return (
    <main>
      <div>0</div>
      <button onClick={increase}>누르면 숫자가 올라감</button>
    </main>
  );
}

버튼을 누르면 count 변수가 1씩 늘어나는 간단한 페이지이다. 예시를 든다라는 시점부터 눈치 챘겠지만, 당연히 div 태그안에 있는 0은 1로 올라가지 않는다,,(그랬으면 state 안쓰겠지..)

근데.. 혹시나 정말 작동하지 않는건가 싶어 코드에 console.log(count)를 입력하고 콘솔창을 확인하면...

...?

잘올라간다.. 무슨상황일까..

결론부터 얘기하자면 onClick 함수를 실행할때마다 count라는 변수가 바뀐 UI를 업데이트 해줘야되는데 그게 안되는거다..

예시에서는 변수가 하나였지만 실제 실무에서 사용되는 변수가 몇개일까. 이렇게 많은 변수가 하나하나 바뀔 때 마다 UI를 업데이트 할순 없으니 여기서 State라는 개념이 나온 것이라고 한다. 정리하자면 단순히 잠깐 값을 들고있는 변수말고 state라는 친구의 값이 바뀌면 UI를 랜더링 하게끔 만들었다고 한다.

props

Container, Presenter 구조를 사용하면 자연스레 컨테이너의 변수나 함수 같은 것들을 프레젠터에 넘겨줘야 하는 상황이 나온다. 이럴 때 사용하는 것이 props 이다.

Container

import React from 'react';
import Hello from './Hello';

export default function HelloContainer() {
  return (
    <Hello name="react" />
  );
}

Presenter

import React from 'react';

export default function HelloPresenter(props) {
  return <div>안녕하세요 {props.name}</div>
}

자식 컴포넌트의 매개변수에 props를 할당해주고, 변수 또는 함수에 props.~해주면 부모 컴포넌트의 모든 변수, 함수들을 사용할 수 있다.