React - 분기와 반복( 논리곱연산자,삼항연산자, map)

 

React에서의 분기와 반복

컴포넌트는 JSX를 반환하는 함수다.

함수 내 JSX를 처리하는 과정에서 분기와 반복을 사용할 수 있다.

JSX 내에서 if와 for와 같은 문법 사용이 어렵기 때문에 편의를 위해서 표현식인 삼항연산자와 map, filter 등을 사용합니다.

 

 

분기 사용 예)

논리곱 연산자 사용

 

삼항연산자로도 가능하다

 

 

jsx내에서는 표현식만 사용할 수 있다.

 

 

 

반복 사용 예)

- 반복을 사용할 때는 key를 지정해줘야한다.

- key는 루프안의 요소와 매칭시켜주는 역할을 한다.

- 만약 해당 li 가 재사용 될 때 리소스 비용을 줄여준다.

- 내부적으로 성능최적화, 데이터를 변경됐을 때 최적화시켜서 렌더링해준다.