[LG 유레카] 9장 조건부렌더링

9장 조건부렌더링

조건부렌더링이란?

컴퓨터 프로그래밍에서의 컨디션은 조건을 읨한다.

따라서 공식 영문 용어인 Conditional Rendering을 조건에 따른 렌더링이라고 해석하고 일반적으로 조건부 레던링이라고 줄여서 부른다.

➡️ 어떠한 조건에 따라서 렌더링이 달라지는 것

조건문의 결과는 true나 false가 나오는데 이 결과에 따라서 렌더링을 다르게 하는 것을 조건부 렌더링이라고 정의하는 것이다.

function UserGreeting(props){
    return <h1>다시 오셨군요</h1>
}

function GuestGreeting(props){
    return <h1>회원가입을 해 주세요.</h1>
}

function Greeting(props){
    const isLoggedIn = porps.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting/>;
    }
    return <GuestGreeting/>;
}

엘리먼트 변수

인라인 조건

인라인 조건이라고 하면 조건문을 코드 안에 집어 넣는 것이라는 뜻을 가지고 있다.

• 인라인 If
• 인라인 If-Else

인라인 If

if문을 필요한 곳에 직접 집어 넣어서 사용하는 방법이다.

if문과 동일한 효과를 내기 위해서 &&라는 논리연산자를 사용한다. AND연산이라고 부른다. 이는 양쪽에 나오는 조건문이 모두 true인 경우에만 전체 결과가 true가 된다.

따라서 첫 번째 조건문이 true이면 두 번째 조건문을 평가하고 첫 번째가 false이면 어

짜피 false니까 두 번째는 평가하지 않는다.

이것을 단축평가 라고한다.

true && expression -> expression
false && expression -> false

컴포넌트 렌더링 막기

실습