조건부 렌더링

웹 애플리케이션을 개발할 때, 사용자 상태나 데이터에 따라 보여줘야 하는 화면이 달라지는 경우가 많다.

예를 들어, 사용자가 로그인했을 때는 환영 메시지와 로그아웃 버튼을 보여주고, 로그인하지 않은 상태라면 로그인 버튼을 보여줘야 한다.

이럴 때 리액트에서는 조건부 렌더링이라는 개념을 사용한다.

즉, 특정 조건에 따라 어떤 컴포넌트를 화면에 그릴지 결정하는 것이다.

리액트는 자바스크립트의 문법을 그대로 사용할 수 있기 때문에, if문, 삼항 연산자(? :), 논리 연산자(&&) 등을 이용해 조건부 렌더링을 구현할 수 있다.

예를 들어,

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

위 코드는 isLoggedIn이라는 상태가 참이면 LogoutButton 컴포넌트를, 거짓이면 LoginButton 컴포넌트를 렌더링한다.

조건부 렌더링을 잘 활용하면 사용자 인터페이스를 더욱 동적이고 유연하게 구성할 수 있다.

트리로서 UI 이해하기

리액트의 가장 핵심적인 개념 중 하나는 UI를 컴포넌트 트리(Component Tree)로 바라본다는 점이다.

UI는 여러 개의 컴포넌트가 계층적으로 연결되어 하나의 큰 트리를 이루고 있다.

트리는 부모-자식 관계를 가진 노드들의 집합이다.

예를 들어, 다음과 같은 구조를 생각해보자.

php-template
복사편집
<App>
 ├── <Header />
 ├── <Main>
 │    ├── <Sidebar />
 │    └── <Content />
 └── <Footer />

• App 컴포넌트가 루트 노드가 되고,
• 그 아래 Header, Main, Footer가 직접적인 자식 컴포넌트이며,
• Main은 다시 Sidebar와 Content라는 자식 컴포넌트를 가진다.