✍️[React] 벨로퍼트-props 통해 컴포넌트에 값 전달하기

자 이제 시작이야~ 리액트 개념을 다시 제대로 잡아보자^^

영상 강의도 좋지만 개념 잡는데에 벨로퍼트가 은근 도움이 되는 것 같아서 벨로그에 정리하기로!

✔️App.js

import React from 'react'
import Hello from './Hello';

function App() {
 return (
  <Hello name="react" color="red"/> // 폰트 색상 red로 설정
  );
}

export default App;

✔️Hello.js

import React from 'react';

function Hello(props) {
 return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;
// color=red , name=react 받아옴

✅비구조화 할당(구조 분해) 문법 사용

(위와 동일한 view 나옴)

import React from 'react';

function Hello({ color, name }) {
 return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

✔️defaultProps 로 기본값 설정

: 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 defaultProps라는 값 설정

📌Hello.js

import React from 'react';

function Hello({ color, name }) {
 return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
 name: '이름없음'
}

export default Hello;

👀App.js에서 name이 없는 Hello 컴포넌트를 렌더링 해보자.

import React from 'react';
import Hello from './Hello'l

function App() {
 return (
  <>
   <Hello name='react' color='red'/>
   <Hello color='pink'/> // name 없음
  </>
 );
}

export default App;

✔️props.children

: 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐 props.childred을 사용.

📌Wrapper.js

import React from 'react';

function Wrapper() {
 const style = {
  border: '2px solid black',
  padding: '16px',
};
return (
  <div style={style}> 

  </div>
 )
}

export default Wrapper;

위 컴포넌트를 App.js에서 사용해보자

📌App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name='react' color='red' />
      <Hello color='pink' />
    </Wrapper>
   );
 }

 export default App;

🤔 아무것도 안보임..외않보여...?

=>Wrapper에서 props.children을 렌더링 해줘야함

✍️쓰이는 곳(App.js)에서 값을 정한다 = props(부모)

✍️쓰임 당하는 곳(Hello.js 또는 Wrapper.js)에서 값을 정한다 = children(자식)

📌Wrapper.js

=> ⭐부모 컴포넌트에서 props를 넘겨받음!⭐

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
   )
 }

 export default Wrapper;