[REACT] 조건부 렌더링

        {errors?.email?.message || errors?.passwordConfirm?.message || errors?.extraError?.message}

REACT를 공부하면서 JS 문법 중 &&연산자와 || 연산자를 활용하는 것을 많이 봤고, 그런 코드들이 깔끔하고 멋져 보여서 한번 정리를 해야겠다고 생각했다.

일단 내가 알고 있는 지식으로는 '&&'는 AND 연산자이고 '||'는 OR 연산자이다. 즉, and 연산자는 비교하는 두개의 값이 모두 true일 때, true를 반환하기 때문에 첫 값이 false라면 뒤에 값을 확인하지 않아도 false를 반환한다. or 연산자도 비슷하게 두 값 중 하나의 값이 true라면 바로 true를 반환한다.

JS 특히 REACT는 이런 특성을 활용하여 코드에 많이 활용하는 것을 볼 수 있었다.

우선 and 연산자를 활용한 문법이다.

JS에서는 true && expression 은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다.

{category !== "DOING" && <button>Doing</button>}

즉 위와 같은 코드에서 category!== "DOING" 문이 true 값이라면 && 뒤에 expression을 반환하고, false 라면 expression을 무시하고 넘어간다.

다음은 or 연산자를 활용한 문법이다.

JS에서는 true || expression 상황에서 항상 true 값으로 평가되고, 그 뒤에 값을 확인하지 않는다.

{errors?.email?.message || errors?.passwordConfirm?.message || errors?.extraError?.message}

위에 코드를 본다면 앞에값이 false라면 계속해서 뒤에 값의 true 여부를 확인한다. 만약 앞의 값이 true라면 true 값을 반환하고 뒤에 값들은 더 보지 않는다.