조건부렌더링을 사용하여 로그인 여부를 나타내는 툴바 만들기 실습 [처음 만난 리액트 #27]

9강. Conditional Rendering

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기

2. chapter_09이라는 이름의 폴더를 생성

3. 만든 폴더에 Toolbar.jsx라는 이름의 파일을 새로 만들고, 아래 코드처럼 Toolbar이라는 이름의 함수 컴포넌트를 만든다.

 

Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLogedIn이라는 값을 props로 받아서 조건부 렌더링을 사용해 환영메세지를 표시하거나 감추고 로그인, 로그아웃 버튼을 보여주는 역할을 합니다.

&& 연산자와 삼항 연산자 두 가지 연산자를 사용하여 각각 inline if와 inline if-else 조건부 렌더링을 구혔했습니다.

 

4. Toolbar 컴포넌트를 사용하는 함수 컴포넌트, LandingPage 만들기

 

LandingPage 컴포넌트는 useState 훅을 사용하여 사용자의 로그인 여부를 자체적으로 관리합니다.

이 값을 Toolbar 컴포넌트에 전달하여 로그인여부에 따라 툴바에 적절한 사용자 인터페이스가 표시되도록 합니다.

 

5. 만든 LandingPage 컴포넌트를 실제 화면에 렌더링하기 위해 index.js 파일을 수정

 

LandingPage 컴포넌트를 import해서 ReactDOM.render함수에 넣어주는 코드

 

6. 리액트 애플리케이션 실행 

VS Code의 상단 메뉴에서 Terminal > New Terminal을 눌러 새로운 터미널을 실행시키고,

npm start 명령어를 실행합니다.

 

 

잠시 뒤에 웹브라우저에 새 창이 열리면서 localhost 3000번 포트로 접속됩니다.

 

 

화면에는 상단의 툴바와 페이지 컨텐츠가 나오는 것을 볼 수 있습니다.

초기 상태는 로그인이 되지 않은 상태이기 때문에 환영 메세지는 보이지 않으며, 로그인 버튼이 표시됩니다.

 

 

로그인 버튼을 누르면 로그인 상태가 true로 바뀌기 떄문에 위 화면과 같이 환영 메세지가 표시되고 로그아웃버튼이 나옵니다.

 

 

다시 로그아웃 버튼을 누르면 원래대로 돌아오는 것을 알 수 있습니다.