React 기본 2-1주차

state

단반향 데이터 흐름 - 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다!

함수형 컴포넌트에서는 state가 없지만 리액트 훅을 사용해서 state를 가질 수 있다.

 

Array.from()

유사 배열 객체나 반복 가능한 객체를 복사해 "새로운" 객체를 만든다.

Array.from(arrayLike[, mapFn[, thisArg]])

 

Array.from(배열로 변환하고자 하는 유사 배열 객체[반복가능한 객체[, 배열의 모든 요소에 대해 호출할 맵핑함수[, 맵핑 함수 실행시에 this로 사용할 값]])

 

from() 메서드의 length 속성은 1입니다.

 

*  각 요소를 곱하는 맵 기능을 하기 위한 화살표 함수를 사용하기
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

* 숫자의 배열을 생성한다.
// 각각 포지션에서 'undefine'로 초기화된 배열이기 때문에 value의 v는 undefined 임.
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

 

useState()

1. 컴포넌트 만들기

import React from "react";
const Nemo = (props) => {
        return null;
}
export default Nemo;

2. App.js에서 컴포넌트 불러오기

3. useState()로 count를 state로 등록하기

const [count, setCount] = React.useState(3);

useState(초기값);

count에는 state값이, setCount에는 count라는 state값을 수정한다.

 

4. 뷰 만들기(반환할 리액트 요소 만들기)

const nemo_count = Array.from({ length: count }, (v, i) => i);
// count의 길이만큼 배열을 만든다 (모든 요소에 적용한다)

     return (
          <div className="App">
              {nemo_count.map((num, idx) => {
                     return (
                          <div
                               key={idx}
                               style={{ width: "150px", height: "150px", backgroundColor: "#ddd", margin: "10px", }} >
                               nemo
                         </div>
              );
            })}
                <div>
                   <button>하나 추가</button> <button>하나 빼기</button>
                </div>
           </div> );

5. 함수 만들기

const addNemo = () => { 
// setCount를 통해 count에 저장된 값을 + 1 해줍니다.
setCount(count + 1); };

const removeNemo = () => {
setCount(count > 0 ? count - 1 : 0); };
// count가 0보다 크면 count -1, 아니면 0

6. 연결하기(함수 호출)

<div>
       <button onClick={addNemo}>하나 추가</button>
       <button onClick={removeNemo}>하나 빼기</button>
</div>

 

이벤트 리스너

사용자가 어떤 행동(이벤트)를 하는지 알려줌! (클릭, 키보드 누름 등)

클래스 형에서는 addEventListener()을 이용해서 이벤트를 등록한다.

꼭 컴포넌트가 사라지면 지워야함.