[react] react hooks 실습 - 진행중

 

 

 

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

 

 

 

1. 리액트는 어쩌다가 만들어졌을까? 

-> 이부분은 건너뛰었다. 오늘은 실습을 할 것이기 때문에

 

2. 작업환경 준비

 

2-1. 사전 설치

Node.js / git / vscode(등 코드 에디터) / yarn (npm 개선된 버전. 귀찮다면 생략하고 그냥 npm을 사용해도 된다고 한다.)

먼저 모두 설치

 

2-2. 새 프로젝트 만들기

 

CRA를 이용 (create-react-app)

npx create-react-app begin-react

cd begin-react
yarn start

해주면 

자동으로 브라우저에서 리액트 아이콘이 떠있는 화면ㅇ ㅣ 나타난다. http://localhost:3000/ 

 

 

2-3. vscode 에서 열기

vscode에서 파일 열고 터미널까지 켜준다.

-> 윈도우에선 단축키가 ctrl + ` 이었는데 mac은 안되는것 같다.

그래서 그냥 vs코드에서 아래 끝부분에 커서를 갖다내면 

위로 올리게끔 커서가 바뀌는데 그걸 올리면 터미널이 올라옴

 

3. 나의 첫번째 리액트 컴포넌트

 

 

4.  useState - 컴포넌트에서 바뀌는 값 관리하기

4-1.

Counter 파일 작성

 

useState() 이용해서 숫자가 카운트 되는 동적인 컴포넌트를 만들어본다.

이때 값을 업데이트하는 방식

1. 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줌

2. 기존 값을 어떻게 업데이트할지에 대한 함수를 등록하는 방식

 

 

1번과 같은 방식은

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1); // 이런 식으로 
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }

}

 

 

 

2번 방식은

function Counter(){
    const [number,setNumber] = useState(0);

    const onIncrease =()=>{
        setNumber(prevNumber => prevNumber+1)
    }
    const onDecrease = ()=>{
        setNumber(prevNumber => prevNumber-1)
    }

이렇게 업데이트 방법을 변수에 설정해 주는식

2번 방식은 주로 컴포넌트를 최적화 할때 주로 사용한다고 한다.

 

 

 

(개인적으로는 1번 방식이 익숙하기 때문에 1번 방식을 선호한다.)

 

 

 

4.  useRef - 특정 DOM 선택하기

리액트도 javascript처럼 DOM 을 직접 선택해야 하는 경우가 있음.

예를 들어서

1. 특정 엘리먼트의 크기를 가져와야 한다

2. 스크롤바 위치를 가져오거나 설정해야된다

3. 마우스 포커스 설정 등등

4. 비디오나 그래프 등 외부 라이브러리를 사용해야 할 때

 

이 중 포커스 예제를 통해 useRef 사용해본다.