[React] Ternary operator / Map

• 기본적으로 return문 안에서 {}를 사용해 JavaScript 문법을 사용할 수 있지만,
• for, if와 같은 일부 기능들에는 제약이 있음
• 이에 대한 몇몇 대체품이 있는데, 이 글에서는 삼항 연산자(Ternary operator)와 Map 함수를 다룸

✅ Ternary operator (삼항연산자)

• 식은 굉장히 직관적이고 간단!!
• 조건문 ? 참일 때 실행문 : 거짓일 때 실행문
• 조건문의 참거짓에 따라 뒤 실행문을 선택적으로 실행하는 형태
• 아무것도 렌더링하고 싶지 않다면 '' 혹은 null 입력

  let [show, setShow] = useState('true')
  .
  .
  .
  {
     show? < h1>Hello!!< /h1> : null
  }

✅ Map

🔸 기본 사용법

• 배열에 사용가능한 기본 내장함수
• 파라미터로 전달된 함수를 사용해서 배열 각 요소를 원하는 규칙에 따라 변환한 후 결과로 새로운 배열 생성

  arr.map(callback, [thisArg])

  • callback : 새로운 배열의 요소 생성 함수로 세 가지 파라미터
    - currentValue : 현재 처리하고 있는 요소
    - index : 현재 처리하고 있는 요소의 index 값
    - array : 현재 처리하고 있는 원본 배열
  • thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스

• 사용 예시

let arr = [1,2,3];
arr.map(()=>{console.log(1)})
// arr 자료 갯수만큼 콘솔창에 1이 찍힘


let [arr, setArr] = useState([1,2,3])
arr.map((a, i) => {
	return(
		<div>{a}</div>
	)
}
// div에 1,2,3이 각각 담겨서 반환됨

🔸 key

• map등을 사용해 반복문으로 html을 생성하면 고유의 key값이 없을경우 경고문이 뜸
• 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려 사용
• key가 없으면 Virtual DOM에서 리스트를 순차적으로 비교, key가 있으면 이 값으로 더 빠르게 변화 감지
• 태그 안에 key = {각각 다른 고유의 숫자}를 추가

// 고유 키 넣어주기
let [arr, setArr] = useState([1,2,3])
arr.map((a, i) => {
	return(
      <div key = {i}>{a}</div>
	)
}

• map의 콜백함수 내 파라미터인 인덱스를 사용하기도 하는데, 고유값이 없을 때만 사용
• index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 하지 못함

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍