react HOC(고차 컴포넌트)
HOC : Higher Order Component https://ko.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 : 컴포넌트 로직을 재사용하기 위한 React의 고급 기술 React API의 일부가 아니며 react의 구성적 특성에서 나오는 패턴이다. 컴포넌트를 가져와 새 컴포넌트를 반환하는...
react Ref - DOM에 직접 접근하기
Ref Ref란 render 메소드에서 생성된 DOM노드나 React 앨리먼트에 접근하는 방법을 제공합니다. props로 변경하는 일반적인 date flow가 아닌 직접적으로 자식을 변경해야 하는 경우가 있는 데, 여기서 자식은 컴포넌트의 인스턴스일 수도 있고,...
react 생명주기(LifeCycle)
react의 생명주기(LifeCycle) react에서는 props와 state의 변화에 따라 생성, 변경, 삭제 등이 실행되고 그 과정들을 생명주기(Life Cycle)이라고 한다. react의 LifeCycle을 보기에 앞서 class component와 functional component의 구조를 알아보자. class component와 functional...
react Hook flow
훅의 호출 타이밍 react에서 setState는 이전값(prev)를 가져온다. setState가 알아서 받아온 이전값(prev)를 가지고 이전값과 반대의 값이 들어가게 간단하게 코드로 만들 수 있다. 이때 useState에 변수말고 함수로 넣어주게 되면 조금 딜레이가 생겨서...
react custom Hook
Custom Hooks https://ko.reactjs.org/docs/hooks-custom.html useState와 useEffect를 반복하여 사용할때 Hook 로직을 묶어서 재사용하도록 공통으로 만드는 것을 custom hook이라고 한다. hook에서 hook으로 정보 전달이 가능하다. useEffect( () => { window.localStorage.setItem("keyword", keyword); window.localStorage.setItem("result", result);...