React - Props & State

• 2023.01.20(금) Foundation-1 > [React] Props and State

---

Props (속성)

• 컴포넌트의 속성값을 의미하며, 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체를 뜻함

// Parent.js(부모 컴포넌트)

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

const Parent = () => {
  const animal = '호랑이';
  // Hook은 최상위에서만 호출이 가능 (return보다 위)

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <Child pet={animal} englishName="tiger" />
      // 객체 형태로 Child.js에 전달
    </>
  );
};

export default Parent;

// Child.js(자식 컴포넌트)

import React from 'react';

const Child = (props) => {
  console.log(props);            // {pet: '호랑이', englishName: 'tiger'}

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{props.pet}</p>         // 호랑이
      <p>{props.englishName}</p> // tiger
	  // 호출할 때에는 'props.'와 함께 불러오기
    </>
  );
};

export default Child;

📝 주요 포인트

• Parent.js

const Parent = () => {
  const animal = '호랑이';
  // Hook은 최상위에서만 호출이 가능 (return보다 위)

  return ()
}

return(
  <>
    <Child pet={animal} englishName="tiger" />
  </>
)
// 최상위에 선언한 hook은 객체 형태로 Child.js에 전달

• Child.js

const Child = (props) => {
  console.log(props); // {pet: '호랑이', englishName: 'tiger'}
}
// parent.js에 return한 걸 보면 <pet={animal} englishName="tiger"/>이고,
// hook으로 animal="호랑이" 라고 값을 할당했기 때문

<p>{props.pet}</p>         // 호랑이
<p>{props.englishName}</p> // tiger
// 호출할 때에는 'props.'와 함께 불러오기

---

State (상태)

• UI에 보여지는 값을 관리하는 기능을 담당

// Main.js

import React, { useState } from 'react';

const Main = () => {
  const [color, setColor] = useState('red');
  // color는 변수, setColor는 color를 변경시켜주기 위해 필요한 함수
  // useStat('red')는 변수 color의 초기상태

  return (
    <>
      <h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
      <button onClick={() => setColor('blue')}>색상 바꾸기</button>
// onClick이라는 이벤트가 발생하면 color변수는 setColor함수의 영향을 받아 blue로 변경됨
    </>
  );
};

export default Main;

📝 주요 포인트

const [color, setColor] = useState('red');
  // color는 변수, setColor는 color를 변경시켜주기 위해 필요한 함수
  // useStat('red')는 변수 color의 초기상태

<button onClick={() => setColor('blue')}>색상 바꾸기</button>
// onClick이라는 이벤트가 발생하면 color변수는 setColor함수의 영향을 받아 blue로 변경됨

---

💬 Props와 State의 차이를 잘 구별하도록 하자. 리액트 쓰려면 아주아주 기본적인 것. 처음에 적용 방법을 봤을 땐 이해가 잘 안 갔는데 두번, 세번, 네번 보면 볼수록 점점 이해가 가기 시작했음. 그치만.. 적용은 어려워ㅓㅓㅓ