오늘은 코드캠프 2주차에 맞이하는 추석연휴다.
매일매일 주어지는 과제를하고 개인 포폴을 진행하다보니 블로그를 기록하며 여유를 즐길 상황이 없는것 같다. ㅜㅜ
프로젝트를 진행하다보면 통신을 통해 백엔드 데이터를 가져와야 하는 상황이 발생한다. 통신을 통해 데이터를 가져오게 되면 오래는 걸리지 않더라고 가져오는 시간이 분명 발생하게 된다.
처음 데이터 통신을 할 때
"오타도 없고 코드를 잘 적었는데 왜 데이터가 안불러와지지..?" 라고 한참동안 고민을 했던 적이 있다.
그때 열심히 공부를 했던게 바로 조건부 렌더링이다.
그래서 오늘은 조건부 렌더링(Conditional-rendering)에 대해 기록을 남겨보고자 한다.
조건부 렌더링이란 무엇일까요?
리액트에서 조건부 렌더링은 특정 조건에 따라 요소와 구성 요소를 전달하는 프로세스를 나타낸다.
리액트에서 조건부 렌더링을 나타내는 방법이 여러가지 있는데
그중 &&, 삼항연산자, Optional Chaining에 대해 알아 보겠다.
삼항연산자
삼항연산자의 문법을 보면
const [onModal, setOnModal] = useState(false)
onModal ? <onModal></onModal> : null위 코드를 보면 모달창을 on/off 를 삼항연산자로 표현한 것이다.
onModal이라는 state가 true면 모달창을 보여주고 false면 null로 모달창을 꺼주는 방식이다.
?오른쪽으로 true일때의 코드 :오른쪽으로 false일때의 코드를 작성하면 된다.
&&연산자
&&연산자의 문법은 매우 간단하다.
const [showHeader, setShowHeader] = useState(true)
< div > { showHeader && < 헤더 /> } </ div >showHeader이 true이면 헤더가 보이게 된다.
&&연산자의 경우 무언가를 렌더링하거나 아무것도 렌더링 하지 않으려고 할때 사용된다.
&연산자와는 달리 &&의 왼쪽표현식만 최종결과를 결정할 수 있는 경우 오른쪽 표현식을 평가하지 않는다.
예를 들어 첫 번째 표현식이 false면 결과가 항상 이기 때문에 다음 표현식을 평가할 필요가 없는 것이다.
> 옵셔널체이닝(optional chaining)옵셔널 체이닝을 사용할경우 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
옵셔널체이닝이 필요한 이유는 서론에도 말씀을 드렸지만 페이지가 렌더링이 됐을때 데이터가 아직 호출되지 않았을 경우 에러가 뜬다. 그 에러를 방지 하기 위해 옵셔널 체이닝을 쓰는 것이다. (옵셔널 체이닝이 등장하기 전에는 &&연산자를 사용함)
옵셔널체이닝의 문법은 ?. 를 사용한다.
?. 앞의 평가대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
위 코드를 보면 commentResult의 데이터가 들어있다면 map함수를 이용해 배열속 데이터를 반복해주는 코드이다.
여기서 옵셔널체이닝을 사용하지 않게되면 데이터가 불러와지기 전에 페이지가 렌더링되어 오류가 나오게 된다.
?.를 사용하지 않는다면 commentResult && commentResult.fetchBoardComments.map()
이런식으로 사용해줄 수도 있다.
위 3가지 조건부렌더링은 많이 사용하니 공부를 열심히 해놓으면 좋을 것 같다. 아디오스!!
