Foundation1 - [React] Props & State

jini.choi·2023년 6월 19일

westudy

목록 보기

3/7

🚀 학습 목표

Hook의 개념을 설명할 수 있고, 상황에 따라 알맞은 Hook을 사용할 수 있다.

props의 개념에 대해 한 문장으로 설명할 수 있다.

state의 개념에 대해 한 문장으로 설명할 수 있다.

useState hook을 사용하여 함수 컴포넌트의 상태를 관리할 수 있다.

state를 이용해서 UI의 변경을 표현할 수 있다.

이벤트를 통해 state를 변경할 수 있다.

props의 개념을 이용해 부모 요소의 state를 자식 요소에서 반영시킬 수 있다.

props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state 값을 바꿀 수 있다. (state 끌어올리기)

Hook의 개념을 설명할 수 있고, 상황에 따라 알맞은 Hook을 사용할 수 있다.

✅ Hook이란?

💻 Hook의 정의

Hook은 클래스 컴포넌트에서만 사용할수 있었던 state(상태)관리와 lifecycle(라이프사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미. 이러한 Hook의 모음을 Hooks라고 한다.

💻 Hook의 특징

React는 useState같은 내장 Hook을 몇가지 제공하며, 컴포넌트 간에 상태 관련 로직을 재사용하기위에 custom hook도 가능하다.

✅ Hook 사용 규칙

💻 함수 컴포넌트 내에서 호출

Hook을 호출할 수 있는 곳은 다음과 같다.

함수 컴포넌트 내부
custom Hook 내부

위 두 가지 경우를 제외한 곳에서는 Hook을 호출할 수 없다.

💻 최상위에서 호출

Hook은 항상 함수 컴폰넌트 내의 최상위에서만 호출
최상위에서 호출해야 해당 컴포넌트가 렌더링 될때마다 항상 동일한 순서로 여러개의 Hook을 호출되는 것을 보장
최상위라는 것은 함수 컴포넌트의 첫 번째 {} 내부를 의미. 만약 첫 번째 {}내부가 아닌 if문, 반복문 등의 중첩되는 코드 블락 {} 안에서 호출하게 되면 에러 발생

props의 개념에 대해 한 문장으로 설명할 수 있다.

Props란 컴포넌트 속성값을 의미하며, 부모컴포넌트로부터 전달받은 데이터를 지니고 있는 객체.

💻 부모 컴포넌트에서의 데이터 전달

Child 컴포넌트 생성하여 부모컴포넌트에서 import, 그리고 아래와 같이 <Child />컴포넌트를 return문 내에 삽입.
어떤 데이터를 자식 컴포넌트로 보내주어야 하는가에 대해 생각
부모컴포넌트에는 이미 선언 되었고 자식컴포넌트에서도 필요한 데이터가 animal이라면 tag에 속성을 주입하듯 pet={animal}과 같이 자식 컴포넌트에 속성값 추가(pet은 자식 컴포넌트에서 데이터를 받을 때 사용되는 인식표)

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

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

const Parent = () => {
  const animal = '호랑이';

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <Child pet={animal} englishName="tiger" />
    </>
  );
};

export default Parent;

💻 자식 컴포넌트에서의 전달 받은 데이터 적용

함수에서 인자를 받아서 사용하듯, 함수 컴포넌트 또한 const Child = (매개변수) ⇒ {} 와 같이 부모 컴포넌트에서 보내준 데이터를 받아서 사용
부모가 전달해준 props는 하나의 객체로 합쳐져서 함수 컴포넌트에 전달됨.
부모 컴포넌트로 부터 받은 props를 표현한다는 것을 명시적으로 나타내기 위해 const Child = (props) ⇒ {}라고 매개변수 이름을 짓는 것이 컨벤션
객체접근법을 사용, 구조분해할당 사용

구조분해 할당 : 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

// 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
    </>
  );
};

export default Child;

구조분해할당 사용

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

import React from 'react';

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

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{pet}</p>         // 호랑이
      <p>{englishName}</p> // tiger
    </>
  );
};

export default Child;

state의 개념에 대해 한 문장으로 설명할 수 있다.

React에서 state란 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미
해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값

💻 State 선언

첫 번째 요소(state) 는 우리가 동적으로 관리하고자 하는 상태값이다. 해당 상태의 초기값은 useState hook을 호출할 때 인자(defaultValue) 로 넘겨준다.
두번째 요소는 첫번째 요소인 상태 값을 업데이트 하는 함수. state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해서 변경

const [state, setState function] = useState(defaultValue)

💻 State 적용

backgroundColor: color와 같이 미리 선언한 state 값을 넣어줌

// Main.js

import React, { useState } from 'react';

const Main = () => {
  const [color, setColor] = useState('red');                       // 4 ~ 5

  return (
    <h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1> // 1 ~ 3
  );
};

export default Main;

이벤트를 통해 state를 변경할 수 있다.

버튼 onClick 이벤트 핸들러 삽입 후 이벤트가 발생할 때 마다 실행될 로직 삽입.
setColor함수를 실행 시키고 인자로 바꾸고자 하는 값인 "blue"넘겨주면 버튼 클릭 시 배경이 블루로 변경됨
이벤트가 발생 시 컴포넌트 리랜더링
실행시키고자 하는 함수에 인자가 필요하면 콜백함수{()=>{setColor('blue')}}아니라면 함수이름만 작성{setColor}

// Main.js

import React, { useState } from 'react';

const Main = () => {
  const [color, setColor] = useState('red');

  return (
    <>
      <h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
      <button onClick={() => setColor('blue')}>색상 바꾸기</button>
    </>
  );
};

export default Main;

props의 개념을 이용해 부모 요소의 state를 자식 요소에서 반영시킬 수 있다.

💻 State 전달

부모에서 state로 관리하고 있는 color값을 color라는 이름으로 넘겨주고, state값을 업데이트하는 함수 setColor는 chageColor함수를 만들어서 change라는 이름으로 넘겨줌

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

import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [color, setColor] = useState('red');

  const changeColor = () => {
    setColor('blue');
  };

  return (
    <>
      <div>부모 컴포넌트입니다.</div>
      <Child color={color} change={changeColor} />
    </>
  );
};

export default Parent;

💻 State 적용

자식 컴포넌트인 Child는 props를 통해서 state 값인 color와 color 값을 업데이트 시킬 수 있는 함수를 받아옴.
props 객체로 감싸져 있기 때문에 부모 컴포넌트로부터 받아온 상태값을 사용하고 싶을 때는 props.color로, 그 값을 클릭 이벤트를 통해 업데이트 함수를 실행시키고 싶다면 클릭 이벤트 핸들러에 props.change를 연결해 실행

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

import React from 'react';

const Child = (props) => {
  console.log(props);   // {color: 'red', change: () => {setColor('blue')}}

  return (
    <>
      <div>자식 컴포넌트입니다.</div>
      <p>{props.color}</p>
      <button onClick={props.change}>색상 바꾸기</button>
    </>
  );
};

export default Child;

props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state 값을 바꿀 수 있다. (state 끌어올리기)

유저가 자식 컴포넌트에 있는 “색상 바꾸기”라는 버튼을 누르면 실행되는 함수는 부모 컴포넌트 내에 있는 setColor 함수
state는 선언된 곳에서 업데이트가 되어야 하지만 이처럼 props를 이용해서 state 끌어올리기를 한다면, 자식 컴포넌트에서도 원하는 상태값을 제어할 수 있다.