#3 노력의 부산물 ㄷㄷㄷ!
props
- props는 properties에 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달할 때, props를 사용한다.
App.js 파일에서 name이라는 값을 전달할 때...
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" />
);
}
export default App;Hello.js
import React from 'react';
function Hello(props) {
return <div>안녕하세요 {props.name}</div>
}
export default Hello;결과는...
Hello 파일에서 컴포넌트 파라미터에 이름을 지정하고 그 파라미터.name을 해서 값을 불러올 수 있다.
이번에는 color라는 또 다른 props를 전달해보겠다.
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" color="red"/>
);
}
export default App;color라는 props에 red라는 문자열을 지정해둔다.
Hello.js
import React from 'react';
function Hello(props) {
return <div style={{color: props.color}}>안녕하세요 {props.name}</div>
}
export default Hello;그리고 div 태그안에 style attribute을 사용해서 props.color라고 써둔다.
결과는...
폰트가 빨간색으로 바뀌었다.
props 내부의 값을 확인할 때 props.를 계속 입력하는데 함수의 파라미터에 구조 분해 문법을 사용하면 코드를 깔끔하게 작성할 수 있다.
Hello.js
import React from 'react';
function Hello({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
}
export default Hello;위의 코드에서, props라는 파라미터 대신 우리가 App.js에 사용한 똑같은 props를 사용한다. 그리고 파라미터를 묶는것은 무조건 중괄호다!
그리고 style안에 color: color라고 쓸텐데, 이 때 반복되는 이름은 또 다시 안써도 되서 한 번만 작성하면된다.
결과는... 똑같다
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
import React from 'react';
import Hello from './Hello';
function App() {
return (
<>
<Hello name="react" color="red"/>
<Hello color="pink"/>
</>
);
}
export default App;App 파일에서 Hello라는 두 번째 컴포넌트를 만들어서 name을 작성하지 렌더링해본다.
결과는...
props.children
컴포넌트 태그 사이에 넣은 값을 조회할 때, props.children 을 사용해서 조회하면 된다.
이번에는 props.children를 사용하는 새로운 컴포넌트를 만들겠다.
Wrapper.js라는 파일을 src 폴더에 생성한다.
Wrapper.js
import React from 'react';
function Wrapper() {
const style = {
border: '2px solid black',
padding: '16px',
};
return (
<div style={style}></div>
)
}
export default Wrapper;style이라는 변수를 선언해서 div안에 props로 넣을 수 있게 스타일을 작성한다.
위의 코드를 App 파일에 사용하면...
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;결과는...
Hello 컴포넌트의 값들은 화면에 보이지않고 Wrapper 컴포넌트의 값만 보인다.
이 때, Wrapper.js에 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>
)
}
export default Wrapper;Wrapper 컴포넌트 파라미터로 children이라고 작성해주고, 밑에 div 태그 사이에 값으로 {children}이라고 작성한다.
조건부 렌더링
특정 조건에 따라 다른 결과물을 렌더링하는 것을 의미한다.
예 )
App.js
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
return (
<Wrapper>
<Hello name="react" color="red" isSpecial={true}/>
<Hello color="pink" />
</Wrapper>
)
}
export default App;여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸준다.
Hello 컴포넌트에 isSpecial이 True이냐 False에 따라 좌측에 # 표시를 보여주겠다.
이 때, 리액트에서 많이 사용되는 삼항연산자를 쓰는 것 이다.
Hello.js
import React from 'react';
function Hello({ color, name, isSpecial }) {
return (
<div style={{ color }}>
{ isSpecial ? <b>#</b> : null }
안녕하세요 {name}
</div>
);
}
Hello.defaultProps = {
name: '이름없음'
}
export default Hello;isSpecial 값이 true이라면 # 를, 그렇지 않다면 null 을 보여준다.
null은 렌더링해도 아무런 값을 출력시키지 않는다.
결과는...
앞에 #표시가 붙여있게 잘 출력되었다.
하지만 지금같은 상황에서는 내용이 특정 조건에 따라 바뀌는게 없어서, && 연산자를 사용하는게 더 간편하다.
Hello.js
import React from 'react';
function Hello({ color, name, isSpecial }) {
return (
<div style={{ color }}>
{isSpecial && <b>#</b>}
안녕하세요 {name}
</div>
);
}
Hello.defaultProps = {
name: '이름없음'
}
export default Hello;위의 코드에서 && 연산자의 결과는
isSpecial이 false 일 땐, false이고
isSpecial이 true 일 땐, #를 렌더링한다.
만약 props 값 설정을 생략하면...
컴포넌트에 props 이름만 작성하고 값을 생략했을 때, 이를 true로 간주한다.
App.js
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
return (
<Wrapper>
<Hello name="react" color="red" isSpecial />
<Hello color="pink"/>
</Wrapper>
);
}
export default App;위의 코드처럼, isSpecial props에 아무런 값을 설정해두지 않으면, ={true}의 값을 가진다.
결과는...
참고 : 벨로퍼트와 함께하는 모던 리액트
느낀점 :
- 오늘은 리액트에서 중요하게 쓰이는 props와 삼항연산자에 대해 배우는 시간을 가졌다.
- 이렇게 다시 공부하면서, 내가 미쳐 몰랐던 것을 배우니까 뿌듯하면서 다시금 생각하는 시간이되었다.
