react.js 스터디 - props로 내려줄때 원하는 부분만 가져오기

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

 

 

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

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

 

 

react.js 스터디 - 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라는 컴포넌트에 잘 넘겨진 것을 확인할 수 있다.