[react] 조건부 렌더링에 대한 고민..

 

오늘 과제를 진행하면서 조건부로 렌더링을 해야하는 경우, 조건이 너무 많다면 어떻게 렌더링을 해야할까?라는 생각이 들었다.

예시로 만든거라 if로 쪼갤 필요는 없지만, type에 따라 다른 컴포넌트를 렌더링해줘야한다고 생각하자.

조건이 적다면 if문을 써서 분기처리를 해주면 되지만 만약 조건이 너무 많은 경우 위 코드에서 if문이 계속 계속 늘어나게 될 것이다. 그렇다면 코드가 너무 길어 보기 싫어질 것이다.

조건이 많다면 어떤 방법을 쓰는 것이 좋을까?

 

✨ switch-case 방식

switch-case를 사용하면 그래도 if문 보다 코드가 읽기 쉽다고 생각한다.

이런 부분은 주관이라 다를 수 있지만 반복적으로 type === "타입"을 반복적으로 적어주지 않아도된다.

const Item= ({type})=>{
	switch(type){
		case 'png':
			return <Png />
		case 'jpg':
			return <Jpg />
		// 많은 확장자들...
		default:
			return <Error />
	}
}

이전에 파일 확장자명마다 다른 컴포넌트를 렌더링해야하는 기능이 있었다. 그때 switch-case를 사용해 조건부 렌더링을 진행했다.

다만, 이때 문제점이 있었다.

문제점 - case옆에는 하나의 값이 온다. 

case 옆에는 표현식이 와야한다. 그리고 하나의 값을 key와 비교한다.

내 경우에는 특정 확장자들은 같은 컴포넌트를 렌더링해 주고 싶었다. 그래서 코드를 아래처럼 작성했지만, 당연히 원하는대로 작동하지 않았다.

// 당연히.. 작동안하는 코드다.
// 이 당시에, 내가 얼마나 JS를 아무 생각없이 썻는 지 느껴진다.
const key = "jpg"
switch(key){
	//  원하는 결과를 얻을 수 없다.
    case ("png" || "jpg"): // if(key === "png"|"jpg")라고 써놓은거나 마찬가지..
        console.log("Render Img")
        break;
    default:
        console.log("default");
} // 실행하면 default가 찍힌다..

switch문은 전달받은 "key"를 case문 옆의 "값"과 비교를 한다. 내가 저 위에 써놓은 case을 해석하자면

if(key === "png" | "jpg" ) 라고 써놓은 것이다... "png" | "jpg"는 당연하게도.. "png"이다.

위 코드의 case는 결과적으로 아래처럼 되있다. 

const key = "jpg"
switch(key){
    case ("png"): // ("png" | "jpg")는 "png"다..
        console.log("Render Img")
        break;
    default:
        console.log("default");
} // 실행하면 default가 찍힌다..

당연히 key값이 jpg인 경우 default를 탄다.

따라서 위 경우처럼 다양한 조건을 비교해야하는 경우 if문을 사용하는 방법이 효율적이라고 생각한다.
- 혹은 case에 전부 써줘도 상관없다.
- 아래에 서술할 Object 방식도 switch-case가 가지는 문제를 가진다.

✨ Object를 사용하는 방식

어떤 방식을 쓰는지 좋을까?는 고민에 답변받은 방법이다.

object를 사용해 key값을 조건으로 value에 렌더링할 컴포넌트를 넣어 사용는 방식이다.

function Item({type}) {
  return (
    <div>
      {
        { 
           author: <Author/>,
           admin: <Admin/>,
           moderator : <Moderator/>
        }[type]
      }

    </div>
  )
}

switch-case문과 크게 다르지 않지만, "조건-렌더링컴포넌트"를 보기가 좋은 방식같다.

예제

코드 샌드박스에서 직접 작성한 예제이다.

https://codesandbox.io/s/react-tree-view-72rf35?file=/src/App.js 

React-tree-view - CodeSandbox

✨ 그래서 어떤 방법이 좋을까?

조건부 컴포넌트들이 동등한 관계라면 object key-value 방식을 선호하고, 예외 상황에 대한 경우는 if문을 사용해 early-return하는 방식을 사용하는 것을 선호한다는 이야기를 들었다.

 

빨리 return할 수 있는 조건 같은 경우 early-return을 하면 코드가 더 보기 편하기때문에, 예외적인 상황이 있는 조건부라면 위 조언처럼 if문을 사용하면 될 것 같다.

 

---

✨내 생각

이번 고민을 통해, 코드는 많이 쓰고 보는 게 중요하다는 점을 느꼈다. 예전에는 if-else가 떡칠이 되어있어도 큰 불편함을 느끼지 못했다. early return을 사용하면 코드가 더욱 보기 좋다는 걸 알고 난 후, 실제로 사용하면서 그 편리함을 크게 느꼈다. 그러나 이번 과제의 코드는 if-return을 하는 부분이 너무 많아져서 고민이였는 데, Object를 사용해 렌더링을 하는 방식은 처음봤다.

JSX문 { } 안에는 값을 넣을 수만 있다는 점을 배웠는 데, 항상 map을 사용해 배열값을 사용해왔을 뿐 객체에서 값을 가져와 사용할 수 있다는 점은 생각지 못했다.

부트캠프를 시작해서, 처음부터 다시 공부를 시작하며 부족한 부분이 얼마나 많았는지 크게 느끼고 있다.