[react]컴포넌트에서 props 사용 방법정리

props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 정보를 전달하는 방법이다

props는 properties의 줄임말로 컴포넌트에 전달되는 속성값이다

다만, props를 너무 별생각 없이 남발하면 props drilling이 일어나 상태관리에 문제가 생길 수 있으므로 

useContext 혹은 Redux 등 전역 상태 관리 방식을 사용해야된다

 

1. 예제(기본 props 전달 예제)

//부모컴포넌트
import React from "react";
import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome name="홍길동" />
    </div>
  );
}

export default App;

import React from "react";

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

export default Welcome;

하위 컴포넌트로 Wellcome을 만들어 주었다(당연.. 컴포넌트 명은 대문자로)

 App컴포넌트에서 Wellcome태그 속성으로 name 그리고 값은 홍길동 같이 코드를 짜면 된다

당연 둘 다 바꿔도 된다

예를 들면 이렇게 "<Welcome user="신짱구" />" 물론 부모컴포넌트에서 바꾸면 자식 컴포넌트도 props.user 로 바꿔야 된다  

 

{
  name: "홍길동"
}

그래서 props는 객체 형태로 전달되기 때문에 이러한 형태로 전달된다고 생각하면 된다 

2. 구조분해 할당으로 props 받기

import React from "react";
import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome name="홍길동" age={25} job="프론트엔드 개발자" />
    </div>
  );
}

export default App;

 

import React from "react";

function Welcome({ name, age, job }) {
  return (
    <div>
      <h1>안녕하세요, {name}님!</h1>
      <p>나이: {age}</p>
      <p>직업: {job}</p>
    </div>
  );
}

export default Welcome;

1번 예제랑 거의 비슷한데 하위 컴포넌트에서 구조분해할당해서 받을 수 있다 

알아보기 편해 보인 듯하다?

당연히  props를 사용하여 배열,함수 등 보낼 수 있다

3. children 사용법

//부모컴포넌트
import React from "react";
import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome>
        <h2>환영합니다!</h2>
        <p>오늘도 즐거운 하루 보내세요 :)</p>
      </Welcome>
    </div>
  );
}

export default App;

//자식 컴포넌트
import React from "react";

function Welcome({ children }) {
  return (
    <div className="welcome-box">
      {children}
    </div>
  );
}

export default Welcome;

children은 html태그를 통째로 전달해준다고 합니다

welcome 태그 안에 h2, p 태그의 내용이 클래스네임이 welcome-box인 태그 안으로 들어가서 렌더링 됩니다

welcome컴포넌트에 children은 고정된 이름으로 바꿀 수 없다고 합니다 

구조 분해 할당 저 부분에 children이라고 적어줘야 쓸 수 있습니다

위에 1,2번 예제와 같은 유형과 섞어서 쓰는 것도 당연 가능 합니다