[React] props : 부모 state 자식에서 사용하기 (사실은 부모의 모든것)

#0. props 왜씀?

부모 컴포넌트에 있는 변수, state, 함수 등은 자식 컴포넌트에서 그대로 사용할수 없다. 부모의 컴포넌트 안에 저장된 값이므로 자식으로  따로 상속이된다거나.. 그런게 없다. 그래서, 이경우 자식으로 전달하고 싶은 데이터를 직접 보내줘야하는데, 이때 사용하는 것이 props다.

import React from 'react';
import {useState} from 'react';

// 부모컴포넌트
export function App(props) {
// 전달하고자하는 값들
  const name = '김시선';
  const [age, setAge] = useState(20);
  const addAge = function () {
    setAge(age+1);
  };

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      {/* 자식컴포넌트 여기에 씀 */}
      <Test/>
    </div>
  );
}

// 자식 컴포넌트
// 아래와 같은 방식으로 부모의 값들을 그냥 가져오면 에러나고 난리남.
function Test(){
  return(
    <div style={{background: color}}>
      안녕하세요 저는 {name}입니다.
      <br />
      저는 올해 {age}살이예요.
      <br /> <br />
      <button onClick={addAge}>한살 더 먹기</button>
    </div>
  )
}

 

#1. 사용법

1. 부모 컴포넌트에서 자식 컴포넌트 태그안에 전달하고자하는 props를 입력한다.

- 아래 코드에서 Test 이름의 컴포넌트에 name, age, addAge, color라고 작명된 props를 전달한거다. 

- 이때 변수도, state도, 함수도, 일반 텍스트도 다음과 같은 형태로 전달 가능하다. 

 <Test name={name} age={age} addAge={addAge} color='blue'/>

 

- 적용된 예

import React from 'react';
import {useState} from 'react';

// 부모 컴포넌트
export function App(props) {
  // 전달하고자하는 변수, state, 함수.. 
  const name = '김시선';
  const [age, setAge] = useState(20);
  const addAge = function () {
    setAge(age+1);
  };

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      {/* 여기 자식 컴포넌트 태그 안에 전달하고자 하는 변수들을 작명={변수}형태로 넣는다. */}
      <Test name={name} age={age} addAge={addAge} color='blue'/>
    </div>
  );
}

 

2. 자식 컴포넌트 함수에 1) props파라미터 추가, 2)불러올때는 props.작명 형태로 가져온다. 

- 파라미터 명을 props말고 다른걸 써도 되지만, 알기 쉽게 props라고 쓰는게 국룰이라함.

// 자식 컴포넌트
function Test(props){ // 여기 ()괄호 안에 props
  return(
  	{/*불러올땐 props.작명*/}
    <div style={{background: props.color}}>
      안녕하세요 저는 {props.name}입니다.
      <br />
      저는 올해 {props.age}살이예요.
      <br /> <br />
      <button onClick={props.addAge}>한살 더 먹기</button>
    </div>
  )
}

 

3. 출력결과

한살 더 먹기 버튼 클릭해서 21살됨

 

- 테스트해보기

https://playcode.io/1535284