코드노트

자바스크립트에서도 반복되는 로직들을 함수로 만들어서 사용했듯이 리액트에서도 컴포넌트 단위로 만들다보면 반복되는 로직이 발생한다. input Validation 같은 예를 볼 수 있을 것 같다. 이번에 진행중인 프로젝트중에서 form control 중에서 컴포넌트 안에 사용되는 함수가 많다보니 코드가 너무 길어졌다. 관련하여 custom hook를 적용해보는걸 기록해보려고 한다. 리액트 공식문서에도 form관련 라이브러리를 보여주지만 사용하는 값들을 반환해주는것들이 비슷하다보니 이해하고 넘어가면 도움이 될것 같다. 사용하는 방법은 간단하다. function use만들이름 () { // ... } - use를 앞에 붙여주고 함수이름을 만들면 리액트훅처럼 사용할 수 있다. Custom Hooks 사용전 코드 ..

useContext - 데이터를 가지고 있는 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줄 수 있다. - 같은 데이터를 사용할때 컴포넌트마다 들고와서 사용하지 않아도 된다. - C, E가 만약 data가 필요하다면? 단계별로 하나하나 거쳐서 데이터를 전달해줘야한다. - A -> C \ B -> D -> E - useContext를 사용하면 단계별로가 아닌 바로바로 데이터가 필요한 컴포넌트로 전달을 해준다. props를 사용하면 되지 않냐고? - props를 여러개 전달한다면..? 컴포넌트들마다 단계별로 2중, 3중 ... 등으로 props를 전달한다고 생각해보자 - 혹시모를 수정에 있어서도 벌써부터 머리가 아파진다. - 내가 모르는 에러가 발생한다면? props를 사용한 컴포넌트들을 살펴보게 될것이..

useEffect - 리액트 컴포넌트가 렌더링이 될 때, 될 때마다 특정 작업을 실행할 수 있는 리액트 hook이다. - mount : 화면에 첫 렌더링 - Update : 리렌더링 - Unmount : 화면에서 사라질 때 이 3개의 상황에서 useEffect 내부에 있는 코드가 실행된다고 생각하면 된다. - useEffect는 2개의 인자를 받는다. - 첫번째는 콜백함수, 두번째는 배열( [], dependency array )을 받는다. 그래서 일반적으로 두가지 사용법이 있다. useEffect(() => { }) - 컴포넌트가 화면에 처음 렌더링 될때, - 컴포넌트가 리렌더링이 될때 useEffect(() => { }, [value]) - 컴포넌트가 화면에 처음 렌디링이 될때, - [value]배열..

useRef - 값을 저장하는 공간 - State와는 다르게 값이 바뀌더라도 새로 렌더링이 되지 않는다. - State가 변화하여 렌더링이 되더라도 Ref의 값은 유지된다. 변경이 될때 값이 유지되어야한다면? useRef를 사용할 수 있다. useRef는 .current 프로퍼티로 전달되어 초기화된 변경 가능한 ref객체를 반환한다. const ref = useRef(value); {current: value} - 컴포넌트가 계속 렌더링이 되더라도 언마운트가 되기 전까지 값을 유지한다. useState 와 useRef의 차이점 See the Pen useState VS useRef by beomjunkwon (@bjkwon) on CodePen. - useState는 값이 변경이될때마다 바로바로 렌더링이..