[React] 조건문, 반복문

1. JSX에서 조건문 쓰기 - 삼항연산자

2. JSX에서 반복문 사용 - map 함수

 

 

 

1. JSX에서 조건문 쓰는 법

 

JSX 안에서는 if else 문법을 바로 사용할 수 없다.

if 문법 대신 삼항연산자를 사용할 수 있다.

 

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드

 

3 > 1 ? : console.log('맞음') : console.log('틀림');

 

---

 

2. map 함수

 

똑같은 html 이 반복적으로 나타나면 반복문을 이용해 쉽게 같은 html 생성할 수 있다.

for 반복문은 JSX 중괄호 안에서는 사용할 수 없기에 map()을 사용한다.

 

var arr = [1,2,3,4];
arr.map(function(){
  console.log('출력')
  });

 

arr에 들어있는 자료의 개수만큼 function 안에 있는 코드를 반복해서 실행한다.

console.log('출력')이 4번 실행된다.

 

var arr = [1,2,3,4];
arr.map(function(a){
  console.log(a)
});

 

콜백함수에 파라미터를 작성하면, 그 파라미터는 arr 안에 있는 자료를 하나씩 출력한다.

즉, a라는 파라미터는 map이 반복될 때마다 arr 자료 안에 있던 하나하나의 데이터를 의미힌다.

arr 안에 있는 1, 2, 3, 4가 콘솔창에 출력된다.

 

var arr = [1,2,3,4];
var newArray = arr.map(function(a){
  return a * 10
});
console.log(newArray)

 

newArray는 arr 안에 있는 자료에 10을 곱한 결과 즉, [10, 20, 30, 40]이 출력된다.

 

var arr = [10, 20, 30, 40];
var newArray = arr.map(function (element, index) {
  return element * index; // 각 요소와 인덱스의 곱을 반환
});

console.log(newArray); // 출력: [0, 20, 60, 120]

 

map(function(a, i) { }

파라미터를 2개까지 넣을 수 있다. 

 

 

• 첫 번째 파라미터 (a): 배열의 각 요소에 접근할 수 있다.
  • 배열에 들어 있는 값들이 순서대로 a에 할당된다.
• 두 번째 파라미터 (i): 배열의 인덱스를 나타내는 정수
  • 0부터 시작해서 배열의 길이만큼 하나씩 증가한다.

 

 

map의 각 파라미터를 활용해 배열의 각 요소를 가공할 수 있다.

이를 통해 배열의 요소에 인덱스를 부여하거나, 특정 인덱스일 때만 조건을 줄 수 있다.

 

 

참고로 React에서 배열을 map 함수로 반복 생성할 때 각 요소에 고유한 key 속성을 추가해야 한다!

 

왜 key 속성이 필요한가?

1. 성능 최적화: React는 리스트의 요소를 구분하기 위해 key를 사용하여 어떤 요소가 변경되었는지, 추가되었는지 또는 삭제되었는지를 판단한다. 이를 통해 불필요한 재렌더링을 피하고 효율적으로 업데이트를 진행한다.
2. 경고 메시지: key가 없거나 고유하지 않으면 React는 경고 메시지를 출력한다.

 

key 속성 사용 예시

var arr = [1,2,3,4];
var newArray = arr.map(function(a, i) {
  return (
  <div className = 'list' key = {i} >
    {a}
  </div>
 );
});

 

key 속성의 권장 사항

• key는 리스트 내에서 고유해야 하며, 각 요소에 대해 같은 key 값을 가지면 안 된다.
• 배열의 인덱스를 key로 사용하는 것은 가능한 피하는 것이 좋다. 이유는 배열의 순서가 변경될 경우 인덱스가 바뀌면서 예상치 못한 동작을 일으킬 수 있기 때문이다. 다른 고유한 값을 사용하는 것이 좋다.

 

고유 ID 사용 예시

const items = [
  { id: 1, value: "사과" },
  { id: 2, value: "바나나"},
  { id: 3, value: "오렌지"},
];

const newArray = items.map((item) => {
  <div className = "list" key = {item.id} >
    { item.value }
  </div>
));

 

 

 

참고) for 반복문을 쓰고 싶다면

 

JSX에서 for 반복문을 직접 사용할 수는 없지만, for 반복문을 사용하여 요소를 배열에 추가한 후 그 배열을 반환하는 방법을 사용할 수 있다.

 

function App() {
  var arr = [];
  
  // for 반복문을 사용하여 요소를 arr에 추가
  for (var i = 0; i < 3; i++) {
    arr.push(<div key={i}>안녕 {i + 1}</div>); // key 속성 추가
  }
  
  return (
    <div>
      {arr} {/* 배열을 반환 */}
    </div>
  );
}

export default App;