[백엔드 개발자의 프론트 도전기] 6. props 2 - children

props에 대해서는 https://jyejye311.tistory.com/105에서 설명하였다.

props로는 특정 값 뿐만 아니라 HTML을 넘기는 방법도 있다.

 

이전에 사용한 코드에서 일부만 수정하여 html을 props로 넘겨보았다.

우선, 부모 컴포넌트는 다음과 같다.

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}>
        여기는 children이라는 이름으로 넘어가는 props 부분입니다~
      </ChildApp>
      <div>
        {/* up, down 버튼이 생성되고, onclick 함수가 전달된다. */}
        <button onClick={onClickUpCount}>UP</button>
        <button onClick={onClickDownCount}>DOWN</button>
      </div>
    </div>
  );
}

export default App;

여기서 변경된 부분만 보면 다음과 같다.

이전에 <ChildApp ..></ChildApp>으로 되어 있던 부분 사이에 출력하고자 하는 메시지를 썼다.

그러나, count라는 state를 넘길 때와는 다르게 어떤 변수도 쓰지 않았다.

 

따라서, 해당 메시지를 사용하고자 할 경우에는 children이라고 쓰면 된다. (인자에도 추가해야 함!!)

import React from 'react';

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

export default ChildApp;

children이 해당 html 부분을 의미하게 되는 것이다.

 

이렇게 만들어진 화면은 다음과 같다.

 

참고 : 

[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이 — Koras02코딩웹 (tistory.com)

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