React Hooks

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

 

 

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

여기에서 호출하니까 오류 남 (함수 컴포넌트 내부가 아니어서)

 

use만 앞에 붙여주면 됌
보통 hook은 폴더에 별도 관리

 

파일에 별도 관리
커스텀 훅 import

 

useRef

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

const refObject = useRef()

 

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

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

 

 

 

 

 

 

 

 

 

 

 

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

 

 

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

같은 코드가 반복되는 느낌

 

name 수정할 때 기존에 있던 값들은 스프레드 연산자로 그대로 유지해야 함

 

consle.log(input)했을 때 값

 

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

 

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

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

 

'Framework > React' 카테고리의 다른 글

[React] React Hooks  (0) 2024.06.28
[React] useRef  (0) 2024.06.27
[React] State와 Props (리랜더링 되는 조건)  (0) 2024.06.27
[React] State  (0) 2024.06.27
[React] Event Handling  (0) 2024.06.27

자식 컴포넌트
부모 컴포넌트

 

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

 

리랜더링 되는 상황

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

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

함수로 내보내기

 

아예 파일 분리해버리기

 

import

'Framework > React' 카테고리의 다른 글

[React] useRef  (0) 2024.06.27
[React] State로 사용자 입력 관리하기  (0) 2024.06.27
[React] State  (0) 2024.06.27
[React] Event Handling  (0) 2024.06.27
[React] Props  (0) 2024.06.27

State

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

변화할 수 있는 동적인 값

 

 

state 여러 개 갖는 거 가능

 

 

useState는 두개의 배열을 반환함

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

일반적으로 이렇게 분리해서 함수에 저장한다

 

0은 기본값 설정

 

상태변화 함수 호출해서 값 변경

 

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

 

'Framework > React' 카테고리의 다른 글

[React] State로 사용자 입력 관리하기  (0) 2024.06.27
[React] State와 Props (리랜더링 되는 조건)  (0) 2024.06.27
[React] Event Handling  (0) 2024.06.27
[React] Props  (0) 2024.06.27
[React] jsx css  (0) 2024.06.27

Event Handling

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

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

 

합성 이벤트

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

 

 

'Framework > React' 카테고리의 다른 글

[React] State와 Props (리랜더링 되는 조건)  (0) 2024.06.27
[React] State  (0) 2024.06.27
[React] Props  (0) 2024.06.27
[React] jsx css  (0) 2024.06.27
[React] JSX 주의사항  (0) 2024.06.27

 

 

기본값 설정
왼쪽처럼 객체로 묶고 스프레드 연산자로 보내도 됌

 

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

'Framework > React' 카테고리의 다른 글

[React] State  (0) 2024.06.27
[React] Event Handling  (0) 2024.06.27
[React] jsx css  (0) 2024.06.27
[React] JSX 주의사항  (0) 2024.06.27
[React] Component  (0) 2024.06.27

jsx는 className으로 css명을 작성

 

'Framework > React' 카테고리의 다른 글

[React] Event Handling  (0) 2024.06.27
[React] Props  (0) 2024.06.27
[React] JSX 주의사항  (0) 2024.06.27
[React] Component  (0) 2024.06.27
[React] 오류 검사, ESLint  (0) 2024.06.27

+ Recent posts