기초정리 5편으로 돌아왔습니다.
지금까지 컴포넌트, props, state 등 많은 기초를 정리했습니다.
지금까지 정리했던 개념은 아주 중요한 개념입니다.
클린 코딩을 한다는건, 이런 기본 개념을 탑재하고 이해하는 단계에서 시작합니다.
자, 이제 어르신같은 말은 그만하고 이번편은 조건부 렌더링에 대해서 배워보겠습니다.
먼저 위와 같은 코드를 보실까요.
저희는 지금까지 state에 대해서 배웠습니다. 그리고 state를 JSX문법에 쓰기 위해 {}를 쓴다는것도 정리했습니다.
map에 관해서 모르실 수도 있지만, forEach와 비슷한 array 기본 내장 함수입니다. (이번편에서 중요한 내용이 아니니 map에 관해서는 구글링을 권장합니다.)
그럼 로직에 관해서 설명을 드리자면,
dataFetchHadle은 fetch 함수를 통해 서버로 부터 데이터를 받아옵니다.
이때 데이터가 배열이라고 가장해서 더미데이터를 setData를 통해 넣었습니다.
그리고 JSX에 map을 이용하여 렌더링을 시키려합니다.
이 로직은 제가 리액트를 처음 공부 했을 때, 작성했던 로직이고 그 당시 제가 원하는대로 렌더링되지 않았습니다.
그냥 이슈가 생겨버렸죠.
이슈 콘솔에는 data가 배열이 아니기에 map을 돌릴수 없다 였습니다.
그 당시에 저도 코린이였기 때문에, 별의 별 방법을 다 써봤습니다.
겨우 찾은 방법이 조건부 렌더링입니다.
조건부 렌더링
조건부라는 무슨 말일까요?
말 그대로 조건에 한하여 렌더링 하겠다는 말입니다.
저희가 그 조건을 잘 정리해준다면, 렌더링을 자유자재로 조절 할 수 있습니다.
&&
위의 코드에서 JSX에 렌덩링에 성공시켰던 조건부 입니다.
{
data && data.map((item) => <li>{item}</li>)
}위와 같이 말이죠.
&&는 앞에있는 state가 undefined 또는 null이지 않는 이상 뒤의 조건을 실행시킵니다.
사실 이문제에서 다른 해결방법은 data의 초기값을 빈 배열 []로 설정해도 해결은 됩니다. 대신에 JSX에는 아무것도 렌더링 되지 않습니다.
저는 이 &&를 로그인 이나 회원가입시 유효성에 통과못한 error를 렌더링 해줄때 많이 사용합니다.
삼항연산자
삼항 연산자에 대해 얘기 하자면 if ~ else문을 좀더 간결하게 해주는 문법입니다.
if(data){
return true;
}else{
return false;
}위와 같은 코드를
data ? true : false이렇게 간략하게 작성할 수 있죠.
위의 이미지로 띄웠던 코드는 많이 미숙한 코드입니다.
그러한 많은 이유중 하나는 data가 서버에 존재하지 않을때의 상황입니다.
에러는 아니죠, 서버통신에 성공했으니깐요.
근데 data가 서버에서 [] 로 넘어온다면, 이는 이대로 또 처리 해줘야합니다.
예를 들어
장바구니 목록을 서버에서 들고오려합니다.
근데 해당 유저는 장바구니에 아무것도 넣어놓지 않았죠.
그래서 data = [] 인 상태입니다.
이럴 때, 제가 자주쓰는 렌더링 조건입니다.
data.length === 0 ?
<li>장바구니가 없습니다.</li>
: data.map(item => <li>{item}</li>)위와 같이 말이죠.
물론 else if 같은 조건도 삼항연산자로 줄수 있지만, 정말 클린하지 않은 코드이니 오히려 로직에 데이터 가공을 추가하는걸 추천 드립니다.
||
|| 조건문은 &&와 반대되는 느낌입니다.
||의 경우, 앞에 있는 조건이 null 이거나 undefinded가 나게 되면 뒤의 부분을 렌더링 합니다. 그런데, 앞의 조건문이 무언가 데이터가 할당되어 있다면 앞의 조건문을 실행하게됩니다.
저는 이 조건문을
CRUD 중에서 U작업을 할 때 많이 사용합니다.
예를 들어, 회원 정보 변경이 있다고 하면
일단 회원의 정보를 먼저 보여줘야겠죠. 그중에 userName 즉, 사용자 이름을 예시로 들어본다면,
<div>{userName !== "" || "Stranger" }</div>위의 코드를 설명드리자면 userName이 빈 값이면 Stranger라는 String을 반환하고 userName이 존재하면 그냥 userName을 반환합니다.
객체 객체 객체
가끔 1차원적인 변수 말고 객체에 담겨 있는 데이터를 다뤄야할 때도 있습니다. 객체안에 객체안에 객체, 이런 데이터를 자주 다루게 될겁니다.
이러한 객체타입의 데이터를 다룰 때도 자주 쓰이는 렌더링이 있습니다.
예를 들어보면
const obj = {
a: {
b: 2
}
}위와 같은 객체가 있다고 가정해봅시다.
b의 값을 가져오기 위해 우리는 obj.a.b라고 작성하죠.
그런데 데이터가 패칭중 미처 패칭이 끝나지도 않았는데, 렌더링 단계에서
obj.a.b를 가져오게 되면 어떻게 될까요?
오류가 납니다. 왜냐하면 아직 서버에서 통신이 미처 끝나지 않아서 obj는 그냥 {} 이거나 null, undefinded겠죠.
이럴대 쓸수 있는 문법으로
obj?.a?.b라는 문법이 있습니다.
이 문법이 있기 이전에는 if를 통해서 분기 처리를 했습니다.
hasOwnProperty라는 문법으로
if(obj.hasOwnProperty(a)){
...
}이런식으로 말이죠.
하지만, 이제 ?.을 쓰게 되면 해당 속성값을 찾아서 없으면 자동으로 undefined를 반환합니다.
여기까지 조건부 렌더링에 대해 알아봤습니다.
서버에서 통신에 성공하면 아무 문제없지만,
통신 실패나 성공하더라도 받은 데이터의 형식에 따라서 에러 처리를 해야하는 입장에서 이런 조건부 렌더링은 큰 힘이됩니다.
다음 편에서는
portals와 ref에 관해 얘기해보겠습니다.
