2023-04-11

리액트에서 동적인 UI 만드는 STEP
1. html css로 미리 UI 디자인을 다 해놓고 = 전등을 예쁘게 달아놓고
2. UI의 현재 상태를 state로 저장해두고 = 스위치랑 연결하고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 = 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록

JSX에서 조건문 쓰는 법
jsx 안에서는 if else 문법을 바로 사용할 수 없으므로 삼항식 사용

자바스크립트 map 함수에 대해 알아보자!

map()메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.
위 코드처럼 했을 때 console.log(1) 3번 실행이 됩니다.

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

기능 2. 소괄호안에 있는 함수를 콜백함수라고 하는데
콜백함수에 파라미터 원하는 이름으로 작명하면
그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.
이 콜백함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, map을 호출한 원본 배열 총 세 가지 인수를 가집니다.
위 코드처럼 했을 때 2, 3, 4가 콘솔창에 출력됩니다.

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

기능 3. return 오른쪽에 뭐 적으면 array로 담아줍니다.
그리고 map() 쓴 자리에 남겨줍니다.
그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 하는군요
위 코드처럼 했을 때 newArray는 [20, 30, 40] 이 출력됩니다.