리액트 조건부 렌더링 간단한 예시와 설명 이전에 삼항 연산자처럼 작동하는 조건부 렌더링에 대해 적어보았음 간단하게 정리하자면 값이 true인지 false인지 여부에 따라 렌더링을 다르게 했음 이러한 조건부 렌더링은 로그인인지 아닌지에 따라 로그인, 로그아웃 버튼을 보여주고 싶은 경우 사용 가능함 그렇다면 조건이 참일때만 작동하고 false인 경우 렌더링하고 싶은 내용이 없다면? 예시 import React from 'react'; function App() { // 생략... return ( {type === 2 && ( Welcome ) ); } 어떤 타입이 있어서 type이 2인 경우에만 Welcome을 렌더링 하고 싶은 경우 && 으로 작성해주면 됨

리액트 조건부 렌더링 간단한 예시와 설명 예시 import React from 'react'; function App() { const isLoggedIn = true; return ( {isLoggedIn ? ( Welcome back, user! ) : ( Please log in to continue. )} ); } 이 코드에서는 isLoggedIn 변수를 사용하여 현재 사용자가 로그인되어 있는지 여부를 나타내고 있음 이 변수를 기반으로, 조건부 렌더링을 사용하여 다른 UI를 렌더링함 isLoggedIn이 true인 경우 Welcome back, user!를, false인 경우 Please log in to continue.를 렌더링함 조건부 렌더링은 애플리케이션의 상태를 기반으로 UI를 동적으로 ..

조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있음 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있음 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함 if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용한다면 React는 현재 상태에 맞게 UI를 업데이트할 것임 아래 두 컴포넌트가 있다고 가정해 보자 function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 ..