props를 통해 컴포넌트에게 값 전달하기
props란, properties의 줄임말이다. props는 우리가 컴포넌트를 사용할 때 특정 값을 전달해주고 싶을 때 사용한다.
코드를 통해 이해해보자.
App.js로 들어와보자. 만약 우리가 Hello 컴포넌트에게 name이라는 값을 전달해주고 싶다고 가정해보자.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" color="red"/>
);
}
export default App;name="react"이라고 작성한 후 Hello 컴포넌트를 열어보자.
Hello 함수에서 props라는 파라미터를 설정해준다. 이 props 파라미터에는 우리가 넣어준 값들이 객체 형태로 들어가 있다.
import React from 'react';
function Hello(props) {
return <div>안녕하세요</div>;
}
export default Hello;Hello 함수에서 콘솔로 props를 찍어보면 다음과 같이 나온다.
그러면 props 값을 JSX 내부에서 랜더링하고 싶다면 앞서 배운 것처럼 중괄호로 감싸주면 된다.
import React from 'react';
function Hello(props) {
return <div style={{
color: props.color
}}>안녕하세요 {props.name}</div>;
}
export default Hello;여기서 style={{}} 이라고 중괄호가 두개가 사용되었는데 이를 혼동하면 안된다. 제일 바깥 중괄호는 이 값이 자바스크립트에서 가져오는 값이다 라는 것을 말하고 있고 그 안의 중괄호는 객체를 뜻하는 중괄호를 말한다.
또, 여기서 props.color, props.name 같이 props가 반복적으로 사용되고 있다. 자바스크립트의 디스트럭처링 할당을 통해 간단하게 표현할 수 있다.
import React from 'react';
function Hello({color, name}) {
return <div style={{
// color : color는 color로 줄여서 쓸 수 있다.
color:color
}}>안녕하세요 {name}</div>;
}
export default Hello;props를 설정하지 않았을 때 기본값 설정하는 방법
만약에 우리가 App.js에서 name 값을 빼먹었다고 가정하자. 이때, 기본값을 '이름없음'으로 설정하고 싶다.
이 경우, Hello.js를 열어보자.
// Hello.js
import React from 'react';
return <div style={{
color
}}>안녕하세요 {name}</div>;
}
Hello.defaultProps = {
name: '이름없음';
}
export default Hello;defaultProps를 통해 기본값을 설정해주었다. 기본값이 잘 설정되었는지 확인하기 위해 App.js로 돌어오자.
// App.js
function App() {
return (
<>
<Hello name="react" color="red"/>
<Hello color="pink"/>
</>
);
}결과 :
기본값이 잘 설정된 것을 알 수 있다.
props.children
<Hello>어쩌구저쩌구</Hello>props.children은 컴포넌트 안의 값을 조회하기 위해 사용한다.
일단 wrapper라는 컴포넌트를 만들어보자. (wrapper.js 파일을 생성한다.)
// wrapper.js
import React from 'react';
function wrapper() {
const style = {
border: '2px solid black',
padding: 16
};
return <div style={style}></div>
};
export default wrapper;이제 App.js에서 사용해보자.
// App.js
import wrapper from './wrapper';
function App() {
return (
<wrapper>
<Hello name="react" color="red" />
<Hello color="pink" />
</wrapper>
);
};이렇게 작성하고 wrapper 컴포넌트를 열어보면 다음과 같이 나온다.
App.js에서 Wrapper 컴포넌트 안에 Hello 컴포넌트 두 개가 랜더링되지 않고 있다. 만약에 브라우저에서 보여주고 싶다면 props.children을 사용하면 된다.
// Wrapper.js
function Wrapper({ children }) {
const style = {
border: '2px solid black',
padding: 16
};
return <div style={style}>{children}</div>
};조건부 랜더링
리액트에서 조건에 따라 랜더링하는 방법을 배워보도록 하자.
Hello 컴포넌트를 이용해서 조건부 랜더링을 어떻게 하는지 알아보자.
// App.js
function App() {
return (
<Wrapper>
<Hello name="react" color="red" isSpeacial={true} />
<Hello color="pink" />
</Wrapper>
);
}isSpecial 이라는 props를 설정해준다. true, false 또한 자바스크립트의 값이기 때문에 중괄호로 감싸준다.
조건부 랜더링을 구현하는 가장 간단한 방법은 삼항 조건 연산자를 이용하는 것이다.
// Hello.js
function Hello({ color, name, isSpecial }) {
return (
<div style={{
color
}}>
{ isSpecial ? <b>*</b> : null }
안녕하세요 {name}
</div>
);
}isSpecial 값이 참이면 *을 덧붙이고 값이 거짓이라면 null 이 들어간다.
참고로 JSX에서 null, false, undefinedf를 랜더링하면 아무것도 나타나지 않는데, 반면 falsy한 값인 0을 랜더링하면 그대로 숫자 0이 나타난다.
그런데, 이 경우에는 삼항 조건 연산자보다 &&연산자를 이용하는게 코드가 더 간단해진다.
// Hello.js
function Hello({ color, name, isSpecial }) {
return (
<div style={{
color
}}>
{ isSpecial && <b>*</b> }
안녕하세요 {name}
</div>
);
}이 경우는 isSpecial이 참일 때만 텍스트를 보여줘서 &&연산자를 사용했지만, 참 거짓에 따라 서로 다른 텍스트를 보여주는 경우에는 삼항 조건 연산자를 사용해야 한다.
한가지 팁
값이 true, false인 props를 설정할 때, 값을 생략한다면 암묵적으로 true로 설정이 된다.
// App.js
function App() {
return (
<Wrapper>
<Hello name="react" color="red" isSpeacial />
<Hello color="pink" />
</Wrapper>
);
}isSpeacial의 값을 생략하면 자동으로 true라고 설정된다.
