🚀 학습 목표
- 클래스형 컴포넌트와 함수 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다.
- 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 사용하기 위한 (훅 기능) 갈고리로 가지고 온다
- props의 개념에 대해 한 문장으로 설명할 수 있다.
- 컴포넌트에 전달된다 (함수 매개변수처럼)
- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체
- 다른 컴포넌트에서 전달할 데이터를 넘겨줄 때 사용
- state의 개념에 대해 한 문장으로 설명할 수 있다
- 상태
- 화면을 구성할 때 정적 / 동적인 부분(액션)
- 기존에는 변수에 담아서 사용
- 동적으로 바뀌는 부분은 state로 선언해서 사용
- 정적 -> state로 활용해서 사용
- 바뀌는 값을 state로 활용성 + 실용성 (불필요한 코드의 반복 줄이기)
- 컴포넌트 안에서 관리된다 (함수 내에 선언된 변수처럼)
- useState 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다.
- import { useState } from 'react';
- state를 이용해서 UI의 변경을 표현할 수 있다.
- 이벤트를 통해 state를 변경할 수 있다.
- onclick, onsubmit 등
- props의 개념을 이용해 부모 요소의 state를 자식 요소에서 반영시킬 수 있다.
- 부모 -> 자식 단방향성
- props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state값을 바꿀 수 있다. (State 끌어올리기)
- 색상바꾸는 버튼
HOOK
특징
- 선택정 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트 안에서 훅을 사용할 수 있다
- 서로 비슷한 기능을 하는 작은 함수의 묶음으로 컴포넌트를 나누어 사용할 수 있다
- 최상위에서만 훅을 호출할 수 있다 (반복문 / 조건문 / 중첩된 함수 내에서 사용할 수 없다)
- 리액트 함수 컴포넌트 내에서만 훅을 호출해야 한다 (일반 자바스크립트 함수 내에서 훅을 호출하면 안된다)
- 클래스 안에서 동작하지 않는다
- 훅이 여러 개가 있으면 HOOKS(모음)
- 갈고리 -> 끌고온다
- 외부에 공간 만들어서 필요한 부분만 끌고오게끔
- 함수 하나하나를 훅이라고 함
등장배경
- 훅의 사용은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다
- useState는 초기 state 값을 하나 받고 위에서는 0을 넣어주었다 (초기값은 첫 번째 렌더링에 한번만 사용된다)
- 시작값이 0이고 버튼이 클릭 되었을 때마다 1씩 증가하고 setCount 함수를 호출하여 state 변수를 증가된 값으로 갱신한다
Effect Hook
- side effects / effects 라고도 부른다
- 다른 컴포넌트에 영향을 줄 수는 있지만 렌더링 과저에서 구현되지는 않는다
- useEffect를 사용한 후에는 리액트는 돔을 바꾼 뒤에 effect 함수를 실행한다
- Effects는 컴포넌트 안에서 선언되었기 때문에 props 와 state에 접근할 수 있다
- useEffect 훅을 이용하여 우린느 리액트에게 컴포넌트가 렌더링 된 후 어떤 일을 수행해야 하는지 전달한다
- 리액트는 우리가 넘긴 함수(effect함수)를 기억했다가 돔이 업데이트 된 후 불러낸다
- 컴포넌트 안에서 불러내는 이유 : state변수 및 prop에 접근할 수 있게 된다
State
- 단어 뜻 그래도 컴포넌트 내부에 가지고 있는 컴포넌트의 상태값이다
- state는 화면에 보여줄 컴포넌트 UI의 정보/상태이다
- state는 컴포넌트 내부에서 정의하고 사용하며 데이터 변경이 가능하다
- 색깔의 초기값은 빨간색이다
- h1 태그 내부는 초기값인 빨간색을 가지고 와 색깔이 빨간색으로 표현된다
- 버튼을 클릭하면 setColor 함수가 실행되면서 파란색이 인자로 넘어가 색깔이 파란색으로 바뀌어 반영된다
Props
- 컴포넌트의 속성값 (Properties)
- 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체
- props를 활용하면 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다
- 사용하려면 자식 컴포넌트를 Import해와야한다
- 자식이 부모에게 보낼 수는 없음(양방향성이 아닌 단방향성 -> 데이터는 위에서 아래로만)
- changeColor 안에는 setColor 함수를 넘겨주고 있다
- Child 컴포넌트를 받아와서 색깔을 변화시켜준다
- 버튼을 클릭하면 changeColor 함수가 실행된다
- changeColor은 setColor 함수를 실행시켜주며 초기값인 빨간색이 파란색으로 변경하게 된다
구조분해할당
const arr = [1,2,3];
const [a,b,c] = [1,2,3];
기존 -> arr[0] arr[1] arr[2]
구조분해할당을 통해 가독성을 높힌다 -> 코드가 복잡할수록 활용성 좋음
const [a, b]= useState('') -> 출력하면 배열안에 두개가 출력됨 초기값(인자값) + 함수가 리턴됨
useState 호출 -> 배열이 오고 두개의값이 있음
초기값은 아무거나 올 수 있음!
스테이트 -> 동적인 값을 사용할 때 업데이트가 필요하므로 변수값으로 업데이트 하는 것이 아닌 UI단위로 반영이 되어야 하기에
스테이트를 사용하는 컴포넌트만 다시 렌더링됨 -> 다른 컴포넌트는 렌더링 되지 않는다
state < > props 독립적 개념으로 꼭 같이 사용해야 하는것은 아님
부모 -> 자식 -> 자손에게도 보낼 수 있음
단방향성만 확인 (제한 X)
