[React] 로그인 여부를 나타내는 툴바 제작 (Conditional Rendering)

로그인 여부를 나타내는 툴바 소스 코드

로그인 여부를 나타내는 툴바 실행 화면

• Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLoggedin이라는 값을 props로 받아서 조건부 렌더링을 사용하여 환영 메시지를 표시하거나 감추고 로그인 로그아웃 버튼을 보여주는 역할을 함
• 엔드 연산자와 삼향 연산자를 사용하여 각각 inline-if와 inline-if-else 조건부 렌더링을 구현
• 랜딩페이지 컴포넌트는 useStateHook을 사용하여 사용자의 로그인 여부를 자체적으로 관리
• 툴바 컴포넌트에 값을 전달하여 로그인 여부에 따라 툴바에 적절한 사용자 인터페이스가 표시되도록 함

💎 Conditional Rendering

• 리액트로 개발할 때 자주 사용하게 되는 기능
• 조건에 따른 렌더링 (= 조건부 렌더링)
• 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미
• 조건문의 결과는 true 또는 false가 나오는데 이 결과에 따라서 렌더링을 다르게 하는 것을 조건부 렌더링이라고 정의하는 것
• True이면 버튼을 보여주고, False이면 버튼을 가리는 것도 조건부 렌더링이라고 할 수 있음
• 조건에 따라 렌더링의 결과가 달라지도록 하는 것을 조건부 렌더링이라고 함

💎 JavaScript의 Truthy와 Falsy

• 보통의 프로그래밍 언어에서는 참과 거짓을 구분하기 위해 불리언 형태의 자료형이 존재
• 값은 true와 false 둘 중 하나
• 불리언과 자료형이 다른 값을 비교하게 되면 오류가 발생
• Truthy는 true는 아니지만 true로 여겨지는 값을 의미
• Falsy는 false는 아니지만 false로 여겨지는 값을 의미

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0","false" (String, not empty)

// falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
''," ",`` (empty string)
null
undefined
NaN (not a number)

💎 Element variables

• 조건부 렌더링을 사용하다 보면 렌더링 해야 될 컴포넌트를 변수처럼 다루고 싶을 때 사용할 수 잇는 방법
• 리액트의 엘리먼트를 변수처럼 다루는 방법
• 엘리먼트를 변수처럼 저장해서 사용하는 방법
• 별도로 변수를 선언해서 조건부 렌더링을 할 수도 있지만 인라인 조건문을 사용하면 조금 더 코드를 간결하게 작성할 수 있음

💎 Inline Conditions

• Inline은 코드를 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어넣는다는 뜻
• 조건문을 코드 안에 집어 넣는 것이라는 뜻을 갖고 있음

💎 Inline If

• if문이 필요한 곳에 직접 집어 넣어 사용하는 방법
• 실제로 if문을 넣는 것이 아니라 동일한 효과를 내기 위해 &&라는 논리 연산자 사용
• end&연산자는 양쪽애 나오는 조건문이 모두 true인 경우애만 전체 결과가 true가 됨'

true && expression => expression

false && expression => false

• 결과가 정해져 있는 논리연산에서 불필요한 연산을 하지 않도록 하기 위해서 사용하는 방법
• Inline If는 end-end 연산자를 jsx 코드 안에 중괄호를 사용하여 직접 집어넣는 방법
• end-end 연산자를 사용하는 이러한 패턴은 단순하지만 리액트에서는 굉장히 많이 사용하는 패턴

💎 Inline If-Else

• Inline if-else는 if-else문을 필요한 곳에 직접 넣어서 사용하는 방법
• 조건문의 값에 따라서 다른 엘리먼트를 보여줄 때 사용
• 삼힝 연산자라고 부르는 물음표 연산자를 사용
• 삼항 연산자는 앞에 나오는 조건문이 true이면 첫 번째 항목을 리턴하고 false이면 두 번째 항목을 리턴
• 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용

💎 Component 렌더링 막기

• React에서는 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 렌더링되지 않음
• class 컴포넌트의 렌더 함수에서 null을 리턴하는 것은 컴포넌트의 생명주기 함수에 전혀 영향을 주지 않음