29일차 (props & state)

오늘은 props와 state를 공부하며 과제를 진행했다. 전보다 컴포넌트를 세분화하고 컴포넌트끼리 데이터를 주고받으며 컴포넌트 안에서 값을 바꾸는 것을 배웠다. 아직까진 공부하면서 벅찬다기보단 재미가 조금 있는 것 같다. 구현을 못하고 있다가 구현이 되면 이 성공했다는 기분이 좋다. 이 기분 계속 가져가고 싶다.

 

props

• 컴포넌트의 속성이며 변하지 않는 값이다. 컴포넌트 외부에서 값을 전달받는다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다.
• 어떤 타입이라도 값을 전달하기위해 객체의 형태를 가진다.
• 외부에서 전달받고 변하지 않는 값이기 때문에 읽기 전용 객체이다. (읽기 전용이 아니라면 전달받은 값을 하위 컴포넌트에서 수정 시 값을 전달해준 상위 컴포넌트의 값도 바뀌기 때문에 개발자가 의도하지 않은 side effect가 생길 수 있다.)

 

props를 사용하는 방법

• 상위 컴포넌트 안에 있는 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
•  하위 컴포넌트에 전달받은 값 렌더링한다.

// 상위 컴포넌트
function Parent() { 
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={'I'm the children'}/> // 하위 컴포넌트에게 text키와 값을 전달
    </div>
  );
};

// 하위 컴포넌트 
function Child({text}) { // 구조분해할당으로 바로 값을 받아온다
  return (
    <div className="child">{text}</div> // 'I'm the children'
  );
};

 

state

해당 컴포넌트 내에서 바뀔 수 있는 값을 의미하며 모든 변동되는 값은 state로 관리한다.

 

useState

• state를 다루는 stake hook 중 하나이다.
• 사용하려면 import 키워드를 사용하여 React로부터 useState를 불러와야 한다.

import { useState } from "react";

• useState를 컴포넌트 안에서 호출하며 useState의 리턴 값을 구조 분해 할당을 변수에 한다. (변수의 이름은 상관없다.)

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

• useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.
• 일반적인 변수를 함수 안에서 선언하면 함수가 끝나게 되면 사라지지만 state변수는 React에 의해 함수가 끝나도 사라지지 않는다.
• state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다.

<div value = {state 저장 변수}/>

 

state 갱신하기

• state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출하면 된다.

state 갱신 함수(갱신할 값)

 

주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리 렌더링 된다.
• React state는 상태 변경 함수 호출로 변경해야 합니다. 강제로 변경을 시도하면 리 렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.