React 리액트 - Props 프로퍼티 구동원리

 

 

Props

 

 

Props: properties(속성)의 줄임말

 

- 컨테이너가 변수들의 값을 넘겨 주는 것으로 읽기 전용 데이터

- 부모 → 자식 방향으로만 전달됨

- 자식은 props를 수정할 수 없음 (immutable)

- 컴포넌트에게 “설정값” 또는 “입력값”을 주는 역할

 

 

import React from 'react';
import PropsComp1 from './PropsComp1';
import PropsComp2 from './PropsComp2';
import PropsComp3 from './PropsComp3';

const PropsContainer = () => {

  const name = "아엘"
  const age = 23
  
  return (
    <div>
      <PropsComp1 name={name} age={age} />    
      <PropsComp2 name={name} age={age} />      
      <PropsComp3 name={name} age={age} />      
    </div>
  );
};

export default PropsContainer;

 

 

부모 컴포넌트에서 name, age를 정의하고

자식 컴포넌트에서 넘겨준 데이터를 받아 사용

 

- 객체(object)는 JSX내에서는 {key=value} 형태로 가져옴

 

 

const PropsComp1 = (props) => {

  console.log(props)

  const name = props.name // 마침표 접근법
  const age = props['age'] // 대괄호 접근법

  return (
    <div>
      <p>
        {name}님 환영합니다!
      </p>
      <p>
        곧 {age+1}살이 되시네요
      </p>
    </div>
  );
};

export default PropsComp1;

 

 

매개변수로 받은 객체 props에서

마침표(.) 또는 대괄호([]) 로 값을 꺼냄

 

- 자식 컴포넌트에서는 부모 컴포넌트가 넘겨준 props를 한번에 받아 사용

 

- React는 단방향 데이터 흐름(one-way data flow)을 갖기 때문에

부모 → 자식 방향으로만 데이터 전달이 가능하고

자식은 그 값을 변경할 권한이 없다

 

따라서 자식 컴포넌트에서 아래와 같이 수정이 불가능

props.age = 25; // 에러

 

 

const PropsComp2 = (props) => {

  // 구조 분해 할당
  const {name, age} = props
  console.log(props)

  return (
    <div>
      <p>
        {name}님 환영합니다!
      </p>
      <p>
        곧 {age+1}살이 되시네요
      </p>
    </div>
  );
};

export default PropsComp2;

 

 

props를 매개변수로 받고 함수 내부에서 구조 분해 할당

 

- 필요한 키만 깔끔하게 추출 가능

- 코드가 깔끔해지고 반복되는 props. 사용 없이

사용하는 props 항목을 한눈에 볼 수 있음

 

 

const PropsComp3 = ({name, age}) => {

  // 들어올 때 구조분해 할당이 되기 때문에 바로 가져다 쓰면 된다
  console.logr({name, age})

  return (
    <div>
      <p>
        {name}님 환영합니다!!!
      </p>
      <p>
        곧 {age+1}살이 되시네요
      </p>
    </div>
  );
};

export default PropsComp3;

 

 

함수의 매개변수에서 바로 구조분해 할당

-> React에서 가장 자주 사용되는 패턴

 

- 간결하고 props 객체 자체를 거의 사용할 일이 없을 때 유용

- console.log(props)처럼 전체 props 객체를 확인하기 어려움

-> 필요하면 console.log({name, age})같이 찍어야 함

 

 

예제

 

 

foodList를 PropsComponent4.jsx 파일을 만들어 Props로 값을 넘기고,  콘솔에 모든 값을 하나씩 출력하기

 

 

const PropsContainer = () => {
  
  const foodList = ['김치찌개', '된장찌개', '고추장찌개']

  return (
    <div>
      <PropsComp4 foodList={foodList} />
    </div>
  );
};

export default PropsContainer;

 

 

부모 컴포넌트에서 foodList를 정의하고

key=value 형태로 데이터 전달

 

 

const PropsComp4 = ({foodList}) => {
 
  console.log("log " + foodList)

  foodList.forEach((food) => console.log("forEach " + food))

  for (let food of foodList){
    console.log("for문 " + food)
  }

  return (
    <div>
      <p>
        메뉴판: {foodList}
      </p>

    </div>
  );
};

export default PropsComp4;

 

 

자식 컴포넌트에서 props를 받아와

함수의 매개변수에서 바로 구조분해 할당

콘솔에 반영

 

forEach, let of 형태로 다양하게 출력 가능

 

 

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

 

https://developernew.tistory.com/432

React 리액트 기본 개념 + 기초 용어 + 화면구성 및 설정

 

https://developernew.tistory.com/433

React 리액트 - 기본 함수, 컴포넌트의 연산

 

https://developernew.tistory.com/434

React 리액트 - 변수 표현, 삼항연산자