props로 내려줄때 원하는 부분만 가져오기

서론

코딩앙마 유튜브를 보며 react.js 스터디를 하고있다.

 

 

next.js안에서만 리액트를 써봤고, 회사 프로젝트를 하느라 3개월동안 바닐라 자바스크립트만 쓰느라

react를 복습하며 놓친 부분을 메우고 있는 중이다!

 

 

props로 내려줄때 원하는 부분만 가져오기

 

 

내가 기존에 알고있던 props 사용방식은 다음과 같다.

출처: https://ko.reactjs.org/docs/components-and-props.html#function-and-class-components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

 

App 컴포넌트에서 name을 넘겨서 Welcome 컴포넌트에서 props.name으로 받는 형태.

props가 오브젝트 형태로 넘겨진다.

 

 

그런데 원하는 데이터만 넘겨서 쓰고 싶을 때는 아래 Hello({ age }) 와 같은 형태로 보낼 수 있었다.

구조분해 할당 원리로 이렇게 되는 것이라고.

 

 

props를 중복해서 쓰지 않아도 돼서

깜빡하고 적지 못했다가 '왜 값이 안넘겨지지?'하는 벙찌는 일이 줄어들 것 같다.

 

해결방법

 

import './App.css';
import Hello from './component/Hello';

function App() {
	return (
		<div className='App'>
			<h3>props: properties</h3>
			<Hello age={10} />
			<Hello age={20} />
			<Hello age={30} />
		</div>
	);
}

export default App;

App 컴포넌트에서 Hello 컴포넌트로 age를 넘긴다.

 

 

import { useState } from 'react';

export default function Hello({ age }) {
	const [name, setName] = useState('Mike');
	const msg = age > 19 ? '성인 입니다.' : '미성년자 입니다.';

	return (
		<>
			<h1>state</h1>
			<h2 id='name'>
				{name}({age}) : {msg}
			</h2>
			<button
				onClick={() => {
					setName(name === 'Mike' ? 'Jane' : 'Mike');
				}}>
				Change
			</button>
		</>
	);
}

받을 때 괄호 안에 인자값을 {age}로 해서 사용.

age로 바로 받아서 사용 가능하다.

 

 

 

결과물은 위과 같다.

10, 20, 30이라는 age 값이 Hello라는 컴포넌트에 잘 넘겨진 것을 확인할 수 있다.