DAY 9. [React] React State & Props

Props

Props

• 정의:
  • 외부로부터 전달받은 값 / 컴포넌트의 속성 ex) 이름, 성별
  • 부모(상위) 컴포넌트로부터 전달받은 값
  • 객체 형태
  • 읽기 전용
• 사용법:
  1. 하위 컴포넌트에 전달하고자 하는 값(data)와 속성을 정의한다.
  2. props를 이용하여 정의도니 값과 속성을 전달한다.
  3. 전달받은 props를 렌더링한다.

import "./styles.css";

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

State

State

• 정의: 내부에서 변화하는 값 ex) 나이, 사는 곳, 취업 여부

• 사용법:

  1. React로부터 useState를 불러온다.

     import { useState } from "react";

  2. useState를 컴포넌트 안에서 호출
     const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

     function CheckboxExample() {
     // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
     const [isChecked, setIsChecked] = useState(false);
     }

     • isChecked: state를 저장하는 변수
     • setIsChecked: state isChecked를 변경하는 함수
     • useState: state hook
     • false: state 초깃값

  3. JSX 엘리먼트 안에 불러서 사용

     // JSX에서 삼항연산자 사용
     			<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
     			```
     

  4. state 갱신

     function CheckboxExample() {
       const [isChecked, setIsChecked] = useState(false);
     
       const handleChecked = (event) => {
         setIsChecked(event.target.checked);
       };
     
       return (
         <div className="App">
           // checkbox 값 변경되면 onChange 이벤트 발생 -> handleChecked 호출 -> setIsChecked 호출 -> isChecked 변수 갱신
           <input type="checkbox" checked={isChecked} onChange={handleChecked} /> 
           <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
         </div>
       );
     }

이벤트 처리

이벤트 처리 방식

// HTML
<button onclick="handleEvent()">Event</button>

//React
<button onClick={handleEvent}>Event</button>

제어 컴포넌트(Controlled Component)

제어 컴포넌트: 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

import React, { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
    </div>
  );
}

React 데이터 흐름

• React는 페이지가 아닌, 컴포넌트 단위
• 상향식으로 앱 만듬 (페이지 만들기 전에 컴포넌트 먼저 만들고 조립)
• 데이터 전달하는 주체는 부모 컴포넌트 => 데이터 흐름이 하향식임
• 단방향 데이터 흐름(one-way data flow)