패스트캠퍼스 챌린지 25일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

2022. 2. 17. 10:17공부/패스트캠퍼스

수강 인증샷


패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.


25일차

 25일차에는 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 08. 조건부 렌더링 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 08. 조건부 렌더링 강의에서는 조건을 통해 원하는 UI를 렌더링하는 방법을 배우게 된다. React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하면 React는 현재 상태에 맞게 UI를 업데이트한다. 또한, 조건부 렌더링을 공부하면서 변수를 선언하고 if를 사용해서 조건부로 렌더링을 하는 법도 배우지만 더 짧고 간결한 구문을 사용하는 방법인 논리 연산자 &&를 이용해 if를 인라인으로 표현하는 방법도 배운다. JSX 안에는 중괄호를 이용하여 표현식을 포함할 수 있기 때문에 그 안에 JavaScript의 논리 연산자 &&를 이용하여 엘리먼트를 조건부로 넣을 수 있다. JavaScript에서 true && 표현식은 항상 표현식으로 평가되고 false && 표현식은 항상 false로 평가된다. 따라서 && 뒤의 엘리먼트는 조건이 true일 때 출력되고 조건이 false라면 React는 무시한다. 그리고 0은 falsy라는 것을 배운다. falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해야 한다.

 


본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 


패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC