S2) Unit 6. [React] React State & Props

📣  State

✔️ 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

✔️ 내부에서 변화하는 값

📣  State hook, useState 사용법

✔️ useState()

 

1️⃣ 불러오기

import { useState } from "react";

 

2️⃣ 컴포넌트 안에서 호출하기 -> state라는 변수를 선언하는 것과 같다(state변수는 함수가 끝나도 사라지지 않는다)

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
  // useState의 리턴값을 구조 분해 할당 하고 있다.
  // setIsChecked함수는 isChecked 변수를 변경하는 함수
}

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

 

3️⃣ 사용하기

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

 

4️⃣ 갱신하기

const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

➰ setIsChecked 함수를 통해 isChecked 변수를 변경할 수 있다.

 

🚨 주의점

➰ React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.

➰ state는 상태 변경 함수 호출로 변경해야 한다. (강제로 변경X)

 

📣  Props

✔️ 외부로부터 전달받은 값

✔️ 부모 컴포넌트로부터 전달받은 값

✔️ 객체 형태의 읽기 전용 값(함부로 변경되지 않아야 함)

 

📣  Props 사용법

1️⃣ 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2️⃣ props를 이용하여 정의된 값과 속성을 전달한다.

3️⃣ 전달받은 props를 렌더링한다.

 

➰ <Parent>, <Child> 컴포넌트 선언

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

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

 

➰ 속성 및 값을 할당하는 방법

<Child text={"I'm the eldest child"} />

 

➰ <Parent> 컴포넌트에서 전달한 문자열을 <Child> 컴포넌트에서 받아오기 -> 함수 매개변수 처럼 전달

➰ props는 객체이며 { key: value } 의 형태를 띄기 때문에 props.text를 중괄호로 묶어서 사용가능

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

 

➕ props를 전달하는 다른 방법 => props.children

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

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

➰ 여는 태그와 닫는 태그 사이에 value를 넣어 전달하는 방법

➰ 이 경우 props.children으로 해당 value에 접근하여 사용할 수 있다.

 

📣  React의 이벤트 처리

✔️ 카멜 케이스 사용

✔️ JSX를 사용하여 함수로 이벤트 처리 함수를 전달한다.

//HTML 이벤트 처리 방식
<button onclick="handleEvent()">Event</button>

//React 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>

 

1️⃣ onChange

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

➰ input의 텍스트가 바뀔 떄마다 이벤트가 발생한다.

➰ onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올 수 있다.

➰ 이벤트가 발생하면 hangleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱신한다.

 

2️⃣ onClick

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

➰ 위 코드는 버튼을 클릭 할 때가 아닌, 컴포넌트가 렌더링 될 때에 alert가 실행된다.

➰ 때문에 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나, 리턴문 외부에서 함수를 정의한 후 이벤트에 함수 자체를 전달해야 한다.

 

//함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

 

📣  React의 데이터 흐름

✔️ 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립한다(상향식)

✔️ 하나의 컴포넌트는 한 가지 일만 한다.

✔️ 데이터는 위에서 아래로 흐른다(하향식) -> 단방향 데이터 흐름

✔️ 데이터를 전달하는 주체는 부모 컴포넌트가 된다.

✔️ 모든 데이터를 state로 둘 필요는 없다 -> state는 최소화하는 것이 좋다.

➕ 어떤 데이터를 state로 두어야 할까?

1️⃣ 부모로부터 props를 통해 전달됩니까? -> state(X)

2️⃣ 시간이 지나도 변하지 않나요? -> state(X)

3️⃣ 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? -> state(X)

✔️ 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트(공통 소유 컴포넌트)에 state를 위치시켜야 한다.