코딩 연습장

React Hooks

클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록

• 함수 컴포넌트 내부에서만 호출 가능
• 조건문, 반복문 내부에서는 호출 불가
• 나만의 Hook(Custom Hook)도 제작 가능

useRef

새로운 Reference 객체를 생성하는 기능

const refObject = useRef()

보관할 값을 담아두기만 하는 단순한 객체 

레퍼런스오브젝트는 컴포넌트 내부에서 렌더링에 영향을 미치지 않아야 되는 변수를 생성할 때 활용한다

바뀐 값을 바로 input의 value로 저장한다

객체 형태로 묶어서 상태 관리하기

하나의 함수로 관리하기 (통합 이벤트 헨들러)

스프레드 함수로 기존 값을 설정하고 

target의 name의 value의 값을 상태 변경된 값으로 변경한다

자신의 스테이트는 변경되지 않아도 부모의 값이 변경 되면 리랜더링 된다.

리랜더링 되는 상황

1. 자신이 관리하는 state 변경
2. 자신이 제공받는 props 변경
3. 부모 컴포넌트 리랜더링

so, 상태관리를 함수 별로 분리하느 게 좋다 (불필요한 리랜더링 방지)

State

현재 가지고 있는 형태나 모양을 정의

변화할 수 있는 동적인 값

useState는 두개의 배열을 반환함

1. 새롭게 생성된스테이트의 값
2. 상태 변화 함수 (State의 값을 변화시키는 함수)

값이 변경되면 리랜더링된다.

Event Handling

이벤트가 발생했을 때 그것을 처리하는 것

ex) 버튼 클릭시 경고창 노출

합성 이벤트

모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태

※ 자식컴포넌트에서 부모컴포넌트로 값을 전달하는 것은 불가능함