# hook

101개의 포스트

React Hook(useEffect)

useEffectuseEffect를 사용하면 컴포넌트를 화면에 그린 후 실행될 함수를 정의사용방법 useEffect는 2개의 매개변수를 가지는데 첫 번째는 컴포넌트 레이아웃 배치와 화면 그리기가 끝난 후 실행될 함수, 두 번째는 의존성 배열첫 번째 인자의 내부는 eff

4일 전
·
0개의 댓글

React Hook(useState)

useState의 첫번째 매개변수로 state의 초기값을 설정한다. 그리고 컴포넌트 상태를 바꾸고 싶을 때마다 setState 함수의 첫번째 매개변수로 바꿔줄 값을 넘겨주면 다음 렌더링 시 새로운 상태가 컴포넌트에 반영된다. setState의 첫번째 매개변수로 함수를

4일 전
·
0개의 댓글

React Hook

React는 버전 16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리 할 수 있는 API인 Hook을 제공Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트처럼 컴포넌트 내부에 상태를 저장 할 수 있고 컴포넌트 생명주기에 관여 할 수 있음.React Hooks는 기존

4일 전
·
0개의 댓글
post-thumbnail

React - useCallback

아리송 아리송 memoization과 useCallback에 대한 학습 일기

2021년 4월 4일
·
0개의 댓글
post-thumbnail

[React] useRef 200% 활용하기

useRef, 제대로 알고 사용해봐요 😁

2021년 4월 3일
·
0개의 댓글

React hook

https://ko.reactjs.org/docs/hooks-intro.htmlhook은 단지 함수일 뿐이다.4가지의 built-in Hooks(useState, useEffect, useRef, useReducer)등이 있다.Hook은 class형 컴포넌트에

2021년 4월 3일
·
0개의 댓글
post-thumbnail

[React] Hooks - useState & useEffect

React-Hooks, useState 와 useEffect 사용방법에 대한 글을 작성했습니다.

2021년 4월 1일
·
0개의 댓글

React hook Form

react hook으로 form을 쉽게 만들 수 있도록 도와줌설치npm i react-hook-form기본 예제input태그에 name을 설정해 주어야 useForm이 찾을 수 있음handleSubmit(): form이 valid할 때 form 데이터를 넘겨줌watch

2021년 3월 31일
·
0개의 댓글

useCallback, 렌더링 성능을 최적화하는 함수

useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다.두 번째 파라미터에 넣는 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다.만약, 비어있는 배열을 넣게 되면 컴포넌트가 렌더링될때

2021년 3월 12일
·
0개의 댓글
post-thumbnail

React Hook 규칙 오류 해결

게시물 페이지에 댓글을 javascript에 map함수로 렌더링하는 코드다. 기능적으로 작동함기에 문제는 없었지만, 댓글이 있는 페이지에서 로그아웃을 실행하고 리렌더링을 하면 에러가 출력이된다.해당에러는 React의 Hook 사용 규칙에 어긋나는 것으로 판단되어 Rea

2021년 3월 12일
·
0개의 댓글
post-thumbnail

TIL | useRef, firebase Storage 시작하기

useRef는 특정한 DOM을 선택하고 싶을 때 사용한다.이게 무슨 말인지 설명하자면, 우선 아래의 코드를 추가하고 파일 삽입 기능을 추가하고 싶다고 했을 때를 예로 들어보자.https://s3-us-west-2.amazonaws.com/secure.notio

2021년 3월 7일
·
0개의 댓글
post-thumbnail

[TIL] useRef

가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있는데, 그럴 때 리액트에서 사용하는 것이 useR

2021년 3월 6일
·
0개의 댓글
post-thumbnail

[TIL] useContext

일반적인 React 애플리케이션에서 데이터는 부모로부터 자식에게 props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. 그래서 context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨

2021년 3월 5일
·
0개의 댓글

Code States TIL - Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다

2021년 2월 22일
·
0개의 댓글

Code States TIL - React Hook

React Hook은 React에서 class의 기능을 function에서도 사용할 수 있게 해줍니다.

2021년 2월 22일
·
0개의 댓글
post-thumbnail

TIL [React Hooks]

Hook은 함수형 컴포넌트에서 React state와 생명 주기 메소드들을 연동할 수 있게 해주는 함수이다. React는 useState와 같은 내장 Hook을 제공하고 있으며 이를 사용하면 웹이나 앱개발에 있어서 클래스형 컴포넌트가 필요없게 해준다.원래 state는

2021년 2월 18일
·
0개의 댓글

useHistory, useLocation, useParams

useHistory, useLocation, useParams

2021년 2월 18일
·
0개의 댓글
post-thumbnail

Hook

1,2차 프로젝트에는 기능구현에 우선을 두어 익숙한 react class형 컴포넌트와 sass를 적용해 작업하였지만 기업협업 프로젝트부터 web develop trend를 따라 가보자 한다.우선적으로 react hooks와 react context apis를 학습해 깔

2021년 2월 17일
·
0개의 댓글
post-thumbnail

Sprint 9 - React Part 2

React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)비동기 호출과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.Side effect를 다루는 React lifecycle met

2021년 2월 16일
·
0개의 댓글

React Hook 총정리

React 16.8 버젼에 추가된 공식 라이브러리Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능JavaScript의 클로저(Closer) 를 이용현재 공식문서에서는, Class형 컴포넌트보다는 Fun

2021년 2월 15일
·
1개의 댓글