리액트에서 조건문/반복문 렌더링

리액트의 JSX에서 조건문이나 반복문을 사용할 때가 있다. 상황에 따라 JSX에서 바로 사용 가능한 방법과 컴포넌트로 빼서 사용하는 방법들을 살펴보겠다.

조건문

📍 삼항연산자

조건문을 적고 나서 ? 뒤에 조건이 참일 때 실행할 코드를 입력한다.
다음 : 뒤에 조건이 거짓일 때 실행할 코드를 입력한다. 중첩 사용도 가능하다.

<div>
  { 
  	selected === '0'
    ? <p>True</p>
  	: <p>False</p>
  }
</div>

📍 && 연산자

위의 경우보단 조금 더 축약해서 사용할 수 있다. 다만 조건이 참일 때만 실행되며, 조건이 false인 경우 렌더링되지 않는다.

<div>
  { 
  	selected === '0' && <p>True</p>
  }
</div>

반복문

📍 map

반복할 자료에 map을 붙여서 자료의 개수만큼 반복문을 돌릴 수 있다.
파라미터의 첫 번째 자리는 value이며 두 번째는 인덱스이다. return에 반복할 코드를 작성해주면 된다. 반복문의 경우, key 속성을 줘야 한다. 나는 반복할 인덱스 값을 넣어주었다.

<div>
	{
      data.map((user,i) => (
          <p key = {i}>반복문돌리자</p>
      )
    }
</div>

조건/반복문

이 외에 if, switch와 같은 조건문 또는 for 반복문 등은 JSX 내에서 바로 사용하지 못한다. 따라서 컴포넌트로 빼서 사용 가능하다.

📍 컴포넌트

대표적인 사례로 for문을 사용한 예시이다. 먼저 사용할 컴포넌트를 만들어 준다. arr 이라는 배열 변수를 만들어 조건에 해당되는 코드를 입력한다. 반복문을 사용할 것이라면 반복할 코드를 입력해주면 된다. 그리고 push를 통해 배열에 넣어 return 하면 된다.

const pagination = () => {
  let arr = []
  for (let i = firstNum; i <= lastNum; i++) {
    arr.push(
    	<PgBtn key={i}>{i}</PgBtn>
    )
  }
  return arr;
}

그다음, 사용할 곳에서 위의 컴포넌트 함수를 호출해주면 return해준 배열 arr의 코드가 실행된다.