1. Blog(2)

반복문

map

• JSX 안의 { 변수, 함수 등만 입력 가능 } 중괄호 내에서 for 반복문을 사용할 수 없기때문에 for 반복문 대신 map을 사용한다
• map 함수는 원본 자료형을 변형시키지 않아 보통 새로운 변수에 담아 사용한다

for

• 일반 for 반복문을 사용하기 위해선 따로 함수를 만들어 함수안에 HTML을 담을 array 자료를 하나 생성한다
• 함수안에서 for 반복문을 이용해 array내에 HTML을 추가해준다
• 완성된 array를 return 한 후 함수를 원하는 곳에 {함수이름()} 데이터바인딩 해준다
• for in / for of 도 동일

key

• 리액트는 반복문을 돌린 HTML요소에 key={} 라는 속성이 필요
• key={} 안에는 반복문이 돌 때마다 0,1,2... 이렇게 하나씩 증가하는 변수같은걸 넣어주면 된다

---

props

• 자식컴포넌트가 부모컴포넌트가 가진 state를 사용하기 위해서 props로 전송해줘야 한다
• <자식컴포넌트 전송할이름={state이름} />
• 자식컴포넌트를 선언하는 function안에 props를 파라미터값으로 전달
• 자식컴포넌트에서 전송받은 state를 {props.전송할이름} 으로 사용
• 전송할이름={변수명} / 전송할이름="텍스트"

---

input

• 사용자가 input에 입력한 데이터는 역시나 중요한 데이터기 때문에 state 저장해서 쓰는게 일반적
• input에 입력한 값을 알고싶으면 input에 onChange 이벤트핸들러를 이용한다

onChange

• input에 무언가 입력할 때마다 특정 함수를 동작시키고 싶을 때 사용

e.target.value

• e.target : 지금 이벤트가 동작하는 HTML요소
• .value : input등에 입력한 값을 의미

// 예시

<input onChange={(e) => { console.log(e.target.value) }}
// input에 뭔가 적을 때마다 콘솔창에 input에 입력한 값이 출력