내가 특정한 조건에서 무언가 화면에 보이게 만들고 싶을때 어떻게 해야 할까요?
리액트에서는 이렇게 합니다.
먼저 Hello.js를 다음과 같이 코딩해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import React from 'react';
function Hello({ trueAndFalse }) {
return (
<div>
{trueAndFalse ? <b>!!</b> : null}
안녕리액트
</div>
);
}
export default Hello;
|
cs |
여기서 킵 포인트는 trueAndFalse인데요.
삼항연산자를 사용하여 {trueAndFalse ? <b>!!</b> : null}이렇게 표현해 줍니다.
만약 trueAndFalse가 true이면 <b>!!</b>
false이면 null이 응답될것입니다.
그런데 우리가 값이 true만 나올것이라고 생각한다면 이렇게 하면 됩니다.
{trueAndFalse &&<b>!!</b> }이렇게 하면 true일때만 이 값이 나오게 해라라는 의미로 사용가능합니다.
다음 App.js에 다음과 같이 코딩합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import React from 'react';
import Hello from './Hello'
function App() {
return (
<div >
<Hello name="안녕안녕" trueAndFalse={true} />
</div>
);
}
export default App;
|
cs |
trueAndFalse={true} 이 부분이 핵심입니다.
이 부분을 통해서 갑니다. 참고로 {true}부분을 지워도 상과없습니다.
그러면 trueAndFalse의 기본값은 true이기 때문입니다.
우리가 출력하면 다음과 같은 값을 얻을 수 있습니다.
false하면 !!가 붙지 않을 것입니다.
이것을 활용하는 방법은 이제나중에 서버랑 연결했을때 만약 서버에서특정값을 보내준다면
그것이 true냐 false냐 값을 생각해서 출력해 줄 수 있을 것입니다.
사용 방법에 따라 여러가지 다양한 효과를 낼 수 있게 되는 것이죠
다음 시간에는 리액트의 가장 중요한 기능중에 하나인 상태를 다루는 방법을 알아보도록 하겠습니다.
'리액트' 카테고리의 다른 글
| React - 컴포넌트 만들기 (0) | 2020.07.29 |
|---|---|
| React- 프로젝트 만들기 (0) | 2020.07.28 |