React의 반복문 : map, filter, 그리고 단축평가

1. map() 함수란?

• 정의 map() 함수는 배열의 각 요소에 대해 주어진 callback 함수를 호출하고, 그 결과를 가지고 새로운 배열을 생성하는 데 사용된다. ( map() 함수를 필요에 따라 반복문처럼 사용할 수도 있다. )
  
• 특징
  • 원본 배열은 변경되지 않는다.
  • callback 함수는 세 가지 매개변수를 받을 수 있다:
    1. currentValue (현재 요소)
    2. index (현재 인덱스)
    3. array (호출된 배열)
• 문법

  array.map(callbackFunction, [thisArg])

  • callbackFunction: 새로운 배열의 요소를 생성하는 함수.

  • thisArg: callbackFunction 내에서 사용할 this 객체 (생략 가능).

    map()은 새로운 배열의 요소를 생성하는 함수 callbackFunction과 callbackFunction에서 사용할 this 객체인 thisArg를 인자로 받는다.

    [thisArg]가 대괄호에 감싸져 있는 이유는 선택적으로 전달하는 인자이기 때문이다.

    {배열.map((요소, 인덱스) => {
      return <div key={인덱스}>{요소}</div>;
    })}

    map()의 callbackFunction은 배열의 각 요소를 필수적으로 전달받는다. 그리고 인덱스의 경우에는 선택적으로 전달하고 사용할 수 있다.

• React에서의 사용
  • React에서는 JSX를 반복적으로 생성할 때 주로 사용.
  • Key 속성
    • 기존 요쇼와 업데이트 요소를 비교할 때 사용한다.
    • 배열 요소마다 다른 요소와 겹치지 않는 고유한 값을 가져야 한다.
    • 고유 값이 없다면 index를 임시로 사용할 수 있지만, 이는 최후의 수단이다. (이유 : 배열의 순서가 바뀌거나 값에 수정을 하면 각 요소의 index가 바뀌고 그로인해 key props가 변경됨)
  • 예시

    const list = ['A', 'B', 'C'];
    list.map((item, index) => <div key={index}>{item}</div>);

---

2. filter() 함수란?

• 정의 filter() 함수는 배열의 각 요소에 대해 주어진 테스트를 수행하고, 조건을 통과한 요소만으로 새 배열을 만든다.
  
• 특징
  • 원본 배열은 변경되지 않는다.
  • 조건에 따라 특정 요소를 필터링하거나 제거할 수 있다.
• 문법

  array.filter(callbackFunction, [thisArg])

  filter()는 배열의 각 요소에 실행할 조건 함수 callbackFunction과 callbackFunction에서 사용할 this 객체인 thisArg를 인자로 받는다. 그리고 callbackFunction은 배열의 현재 요소를 인자로 받는다.
  

const 새배열 = 배열.filter((배열의 요소) => 조건)

filter()의 callbackFunction은 배열의 각 요소를 필수적으로 전달받는다. 그리고 callbackFunction의 조건에 통과하는 요소를 모아 새로운 배열을 반환한다.

• React에서의 사용 필터링 후 JSX를 생성하거나, 특정 조건에 맞는 컴포넌트만 렌더링할 때 활용.
  
• 예시

  const numbers = [1, 2, 3, 4, 5];
  const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4]

---

3. 단축평가란?

• 정의 논리 연산자를 사용하여 특정 조건에 따라 값을 반환하거나, 조건에 따라 코드를 실행하는 방법.
  
• 유형
  1. && 연산자 (논리 AND)
     • A && B에서 A가 false라면 B를 확인하지 않고 A 반환.
     • A가 true라면 B 확인, B 값 반환.
  2. || 연산자 (논리 OR)
     • A || B에서 A가 true라면 B를 확인하지 않고 A 반환.
     • A가 false라면 B 확인, B 값 반환.
• 예시

  const name = null;
  const defaultName = name || "Unknown"; // "Unknown"
  const isValid = true && "Valid"; // "Valid"

조건부 렌더링

React에서 조건에 따라 다른 결과물을 렌더링 하는 것이다.

컴포넌트를 구현하고, 애플리케이션의 상태에 따라 컴포넌트를 렌더링 한다.

많이 사용되는 4가지 방법

1. if문

   if (조건) {
     return 조건이 참일 때 렌더링할 컴포넌트
   } else {
     return 조건이 거짓일 때 렌더링할 컴포넌트
   }

   if문에서 주의할점 : React의 함수형 컴포넌트에서 if문을 사용하여 조건부 렌더링을 수행할 때 JSX 내부에서는 직접 if문을 사용할 수 없다.

2. switch문

   if문과 비슷하게 javascript에서 사용하는 방법과 거의 동일하게 사용한다.

   2개 이상의 조건이 있을 때 유용한 방법이다. 그리고 각각의 경우에 따라 다른 컴포넌트를 반환할 수 있다.

    switch (값) {
     case 조건1:
       return (
         조건1이 참일 때 렌더링할 컴포넌트
       );
     case 조건2:
       return (
         조건2가 참일 때 렌더링할 컴포넌트
       default:
         return 어떤 case문과도 일치하지 않을 경우 렌더링할 컴포넌트
     }

3. 삼항연산자

   삼항연산자는 javascript에서 사용되는 조건부 연산자로, 한 개의 조건에 참과 거짓에 따른 실행문을 작성한다.

   특정조건 ? true일 때의 실행문 : false일 때의 실행문

   삼항연산자는 JSX 내부에 작성할 수 있다. 그렇기 때문에 불필요한 함수를 작성하지 않고 return문 내부에 바로 코드를 작성하는 것이 좋다.

   삼항연산자는 조건에 따라 값을 할당하거나 간단한 조건부 렌더링을 수행할 때 유용하게 사용하지만 복잡한 로직에 사용되면 오히려 코드의 가독성을 해치게 된다.

4. &&연산자

   &&연산자는 논리연산자중 하나인 논리곱연산자이다.

   두 피연산자 중 하나라도 거짓이면 거짓을 반환하기 때문에 왼쪽 피연산자가 false라면 바로 false를 반환한다.

   피연산자1 && 피연산자2;

   이러한 특성을 사용해 React에서는 JSX 내부에서 특정 조건이 참일때만 요소를 렌더링 하는데 유용하게 사용된다. 조건이 참일 경우에만 컴포넌트가 렌더링 되고, 참이 아니라면 아무것도 렌더링 하지 않는다.

   {조건 && 조건이 참일 경우 렌더링할 컴포넌트}

   삼항연산자와 동일하게 JSX 내부에서 작성할 수 있다.

   ---

   컴포넌트 렌더링 막기

   특정 컴포넌트를 보이지 않도록 숨기고 싶으면 렌더링 결과를 출력하는 대신 null을 반환해주면 된다. return null;

   null은 javascript에서 어떤 값이 의도적으로 비어 있음을 표현할 때 사용한다. 그렇기 때문에 return null;이라고 작성하면 의도적으로 아무것도 반환하지 않겠다는 의미를 나타나게 되어서 아무것도 렌더링하지 않게 된다.