TIL-20, React, State & Props

React에서 아주 중요한 (물론 다른것들도 아주 중요하지만)
Props와 State에 대해서 학습을 해보자!

Props

Props란?
-> 성별이나 이름처럼 외부로부터 전달받은 변하지 않는 값.
컴포넌트가 가진 속성이며, 상위 컴포넌트로부터 전달받은 값이다.
전달인자처럼 전달될 수 있고, 화면에 출력하고자 하는 데이터를
담은 초기값으로 사용할 수 있다.
객체 형태이고, 읽기 전용이다. (변경될 수 없기 떄문에)

속성과 값을 할당하는 방법
-> <컴포넌트 속성={값} /> 의 형식으로 작성하면 된다.
만약 Child라는 컴포넌트에 text라는 속성을 선언하고 값을 넣으려면
<Child text={"hello world"} />
위와 같이 작성해주면 된다.
자세한 예시를 아래 코드에서 살펴보자.

function Parent() {
  return (
    <div className="parent">
      <h1>i'm the parent</h1>
      <Child text={"hello world"} />
    </div>
  );
};

function Child() {
  return (
    <div className="child"></div>
  );
};

위와 같이, Parent의 <Child />를
<Child text={"hello world"} /> 로 해주고,

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

Child 컴포넌트를 위와같이 해주면 렌더링이 된다.
(props는 위에서 설명했듯이 객체 형태이기 떄문에
props.text의 Dot notation형태로 적어주는것.
Parent 컴포넌트에서 text={"hello world"}로 작성해준 것에서
text는 키, "hello world"는 값이 되는것이다.)

위 방법 외에 props.children 방식도 존재한다.

function Parent() {
  return (
    <div className="parent">
      <h1>i'm the parent</h1>
      <Child>hello world</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
     <p>{props.children}</p>
    </div>
  );
};
  

위와 같은 방법으로 존재해도 같은 결과물을 얻어낼 수 있다.
(하지만 별로 안쓰이는듯..)

State

State란?
-> Toggle Switch나 Counter처럼 컴포넌트 내부에서
변할 수 있는 값.
(체크박스에 체크가 되고 안되고, text 입력칸에
text의 내용이 변하는 등.)
State가 변경되면 리렌더링(실시간 업데이트)된다.

useState
최우선적으로
import { useState } from "react";
react에서 useState를 import한다.
기본적인 형태는 아래와 같다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

const [state 저장 변수, state 갱신 함수] = useState(초기 값)이다.
배열의 0번째 요소는 현재 state(초기 값),
1 번째 요소는 이 변수를 갱신하는 함수이다.
useState의 인자로 넘겨주는 것은 state의 초기값이다.
위의 코드로 예를 들어 설명하자면,
현재 isChecked의 값은 초기값인 false (useState)이고,
그 초기값은 setIsChecked 함수로 인해서 변하게된다.

아래 코드 예시로 살펴보자.

function NameForm() {
  // 1. useState를 설정해준다. 초기값은 빈문자열("")이고,  
  // name 값이 setName 함수로 인해 변경될 것이다.
  const [name, setName] = useState("");
  
  // 3. 이벤트 핸들러 handleChgange가 작동되면
  // 이벤트(onChange)의 target (input 태그)의 vaule값 (name)이
  // setName 함수로 인해 변경된다.
  const handleChange = (e) => {
    setName(e.target.value);
  }
  
  return (
    <div>
    // 2. text 타입의 값이 변하면 (onChange) 
    // 이벤트 핸들러인 handleChange 함수가 작동된다.
      <input type="text" value={name} onChange={handleChange}>
      </input>
    </div>
  )
};

리액트의 핵심!!
리액트 데이터의 흐름은 Top Down (하향식) 이다!
부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다!