[React] JSX에서 조건문 컴포넌트 렌더링하기

리액트에서 조건문 사용하는 방법 알아보기.

 

개발을 하다 보면 조건문을 사용하는 경우가 아주 많은데

나의 경우 JSX에서 if문, switch문으로 조건문을 사용하려 하니 오류가 났다.

 

JSX에서 조건문 사용하기

상황 발생

- map메서드를 사용해서 li 컴포넌트를 렌더링 해주고 있었는데 button 안에 name이라는 props를 받는 아이콘을 상황에 맞춰 렌더링 해주고 싶었다.

Object.values(Categories).map((item, idx) => {
	return (
    	<li key={idx}>
        	<button value={item}></button>
        </li>
       )
   }

 

 

첫 번째 시도: if문 사용하기

{Object.values(Categories).map((item, idx) => {
	return (
		if(true) <div>aaa</div>
	)	
}

우선 if문이 잘 나오는지 확인하기 위해 true 값을 주고 div를 리턴하는 문을 작성했다.

하지만 이런 파싱 에러를 내뿜었다.

JSX를 반환하는 부분에서는 if문과 switch문이 사용이 안 되는 듯했다.

만약 jsx문에서 if문을 사용하고 싶다면 return문을 지우고 바로 if문을 작성해줘도 된다.

 

 

두 번째 시도: switch문 사용하기 (JSX문 안에서)

 {Object.values(Categories).map((item, idx) => {
          switch (item) {
            case '해야할 일':
              return (
                <li key={idx}>
                  <button
                    {item}
                    <Icon name='format_list_bulleted' />
                  </button>
                </li>
              );
            case '진행 중':
              return (
                <li key={idx}>
                  <button
                    {item}
                    <Icon name='sync' />
                  </button>
                </li>
              );
            case '완료됨':
              return (
                <li key={idx}>
                  <button
                    {item}
                    <Icon name='task_alt' />
                  </button>
                </li>
              );
          }
        })}

return을 지우고 바로 switch문을 작성하면 동작은 했다. 

하지만 이렇게 또 반복되는 형태로 작성할 수밖에 없었다.  :(

나는 내가 넣고 싶은 Icon 컴포넌트만 상황에 맞춰 렌더링을 해주고 싶었기에 다른 방법을 찾아보았다.

 

 

세 번째 시도: enum

* enum: 객체를 변수로 저장해놓고 사용

 

내가 원하는 컴포넌트를 상태 값에 다르게 표현하고 싶기 때문에 이를 객체 자료형으로 작성한다.

  const Icons = {
    '해야할 일': <Icon name='format_list_bulleted' />,
    '진행 중': <Icon name='sync' />,
    '완료됨': <Icon name='task_alt' />,
  };

이후에 JSX에서 대괄호를 붙이면 state에 해당하는 값을 사용할 수 있다.

{Object.values(Categories).map((item, idx) => {
          return (
            <li key={idx}>
              <button
                value={item}
                onClick={onClick}
                disabled={category === item}>
                {item}
                {Icons[item]}
              </button>
            </li>
          );
        })}

 

예쁘게 잘 나온다!!

 

JSX에서는 If문, switch문을 사용하는데 제한이 있기에 삼항 연산자나 &&연산자를 많이 사용하는 듯하다.

이번 경우에도 그렇게 사용할 수 있었으나  enum을 사용할 수도 있다는 것을 알게 됐다.