[백엔드 개발자의 프론트 도전기] 5. props

컴포넌트 사이의 데이터 전달은 props를 통해 이루어진다.

함수형 컴포넌트에서, 다른 컴포넌트의 state를 가져오고 싶으면 아래와 같은 단계를 거쳐야한다.

1. 전달해주는 측

state를 정의한 함수이다.

여기서는 정의한 다른 컴포넌트를 호출하면서, 해당 컴포넌트에 이 state를 넘겨줄 이름을 지정한다.

2. 전달받는 측

해당 state를 가져오려는 함수이다.

마치 c,cpp,java에서 인자를 넘기듯이, function을 정의할 때

해당 state를 넘겨주기 전 정의한 이름을 인자로 써주면 된다.

 

이렇게만 보면 어려우니, 예시를 보자.

-예제

우선, state를 정의하고 메인으로 사용하는 컴포넌트 부분이다.

이전 https://jyejye311.tistory.com/104를 참고하면, 이 컴포넌트의 구조를 자세히 확인할 수 있다.

여기서 코드를 약간 수정한다.

import './App.css';
import { useState } from 'react';
import ChildApp from './ChildApp';

function App() {
  // count라는 state와 count의 setter를 동시에 정의하는 과정
  const [count, setCount] = useState(0);

  // up 버튼 클릭했을 때 동작하는 함수
  const onClickUpCount = () => {
    setCount(count+1);
  };

  // down 버튼 클릭했을 때 동작하는 함수
  const onClickDownCount = () => {
    setCount(count-1);
  };

  return (
    // html이 들어감
    <div className="App">
      {count} { /*여기까지만 쓰면 count만 뜨는 상황.*/}
      <ChildApp countNum={count}></ChildApp>
      <div>
        {/* up, down 버튼이 생성되고, onclick 함수가 전달된다. */}
        <button onClick={onClickUpCount}>UP</button>
        <button onClick={onClickDownCount}>DOWN</button>
      </div>
    </div>
  );
}

export default App;

return()에서 state인 count를 보여준 뒤, => {count}

아래에 ChildApp을 호출하였다.             => <ChildApp ...></ChildApp>

ChildApp은 src/ 아래에 새로 정의한 컴포넌트로, count라는 state를 countNum으로 사용할 수 있게 넘겨준다.

<ChildApp countNum={count}></ChildApp>

즉, 이 부분을 쓰는 것이 ChildApp을 호출하면서 state를 넘겨주는 것이다.

함수를 호출하면서 인자를 넘겨준다고 생각하면 편할 것 같다.

ex)
functionChildApp(countNum){
    ...
}
function App(){
    ChildApp(count) 
}
차이점은 넘겨주는 이름을 App()함수에서 미리 지정해야 한다는 것!

 

차례대로 count, ChildApp, button을 만들었으니, 이 순서대로 화면에 나올 것이다.

 

다음으로 ChildApp을 살펴보자.

src/ 아래에 ChildApp.js를 다음과 같이 작성하였다.

import React from 'react';

function ChildApp({countNum}) {
  return countNum == 1 ? <div>is 1</div> : <div>not 1</div>;
}

export default ChildApp;

ChildApp() 함수에서는 인자로 countNum을 받으며,

이후에는 해당 변수를 함수 내부에서 자유롭게 사용할 수 있다.

여기서 주의할 점은 App에서 인자를 넘겨줄 때 countNum이라고 넘겨주었기 때문에

여기서도 반드시 countNum이라고 써야 한다는 것이다.

실험삼아 function ChildApp({count}){ ... }로 사용했을 때는 해당 값의 변화가 제대로 인식되지 않았다.

즉, 선언한 이름이 매우 중요하다.

이 countNum이 부모 컴포넌트(App)으로부터 받은 props인 것이다.

 

이렇게 만들고 났더니 아래와 같은 결과를 얻을 수 있었다.

1이 아닐 때

1일 때

화면에서 count의 값이 변하고, 그 때마다 1인지 아닌지 체크해서 부분적인 렌더링이 발생한다.

 

참고 : 

👊리액트 부시기 : 리액트 초보 탈출하기 (velog.io)