props

app 컴포넌트에서 다른 컴포넌트에 값을 전달해주고 싶을 때,

 

App.js

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

function App(){
	return(
    	<Hello name="react"/>
    );
 }	
 
 export default App;

Hello 에서 name 값을 사용하고 싶을 때, 어캐 해야 할까

 

Hello.js

import React from 'react';

function Hello(props){
	return<div> 안녕하세요 {props.name}</div>
 }
 
 export default Hello;

이런식으로 props 를 써서 name 값을 조회하고 싶다면 props.name 을 사용하면 된다!

 

 

만약 입력받은 값이 여러개면?

 

App.js

 

<Hello name="react" color="red"/>

 

Hello.js

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

  

props. name, props. style 처럼 일일히 쓰는게 귀찮기 때문에 비구조화 할당을 하면 좀 더 간결하게 쓸 수 있음 

 

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

{ color, name}

 

 

App.js 가 아니라 컴포넌트 사이에서 태그 사이에 넣은 값을 조회하고 싶을 때는 props.children 을 쓰면 됨

 

Wrapper.js

import React from 'react';

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

    </div>
  )
}

 

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 안에 담긴 hello 태그 두개가 보이지 않을 것이다.

내부 내용이 보이게 하려면 props.children 을 렌더링 해줘야 한다.

 

Wrapper.js

import React from 'react';

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

 

참고: https://react.vlpt.us/basic/06-conditional-rendering.html