공식문서 https://ko.reactjs.org/docs/context.html#caveats Context – React A JavaScript library for building user interfaces ko.reactjs.org Context API? react는 16.3 버전부터 정식적으로 Context API를 지원하고 있다. 일반적으로 부모와 자식간 props를 날려 state를 변화시키는 것과는 달리 context api는 컴포넌트 간 간격이 없다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function을 사용할 수 있다. 또한 redux의 많은 어려운..

상태관리란? 상태관리는 쉽게 말해 전역 데이터 관리이다. 렌더링과 연결된 데이터를 형제나 부모와 자식 컴포넌트끼리 주고 받기는 생각보다 까다롭다. 형제 컴포넌트끼리 데이터를 주고 받으려면? 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨준다. 자식 컴포넌트에서는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해준다. 만약 1촌 관계 컴포넌트가 아니라 6촌 관계 컴포넌트가 같은 데이터를 사용하려고 한다면? props를 6단계 이상 걸쳐서 넘겨줘야한다;; 🤢 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 게 상태관리이다. 많이 사용되는 상태관리 툴 ContextAPI() Redu..

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop 이벤트 루프 - JavaScript | MDN JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다. developer.mozilla.org Javasript 와 싱글 쓰레드 자바스크립트는 싱글 쓰레드로 동작하는 언어이다. 메인 쓰레드 하나와 콜스택 하나로 구성되어 있다! 비동기 작업을 동시에 할 수 있다 → 자바스크립트는 코어 엔진만 가지고 않고 실행환경(런타임)의 도움을 받아 동시 실행을 한다. → WebAPI(dom, ajax, s..

Custom hooks? 반복되는 로직을 재활용하기 위해 사용한다 Custom hook은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위해 사용한다 Custom hook을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다! 규칙 함수 명이 use로 시작해야 한다. 최상위에서만 호출할 수 있다. 리액트 함수 내에서만 호출할 수 있다. 꼭 return 값을 주자. 사용법 아래 코드를 보면 여러 개의 input에 ref를 부착해서 state의 값을 onChange 함수를 이용해 변경시켜서 span 태그 안의 내용을 변경키고 있다. 하지만 중복되는 useState, useRef 훅과 onChange 함수가 존재한다. 이 중복되는 로직들을 따로 분리해서 간결하고 재사용성이 높은 CustomHook..

useCallback() useCallBack()는 함수를 메모이제이션 하기 위한 훅 메모이제이션이란 쉽게 말해 메모리 어딘가에 저장해두고 나중에 쓰겠다는 것이다. 함수형 컴포넌트가 리렌더링되면 컴포넌트 안에 선언해둔 함수나 인라인으로 작성한 함수를 다시 한 번 생성하게 된다. 예를 들어 어떤 컴포넌트가 총 10번 렌더링된다면 그 안에 작성해둔 함수들도 10번 만들어지는거고 이건 메모리 관리에 그리 효율적이지 않다. 주로 자식 컴포넌트에게 전달해주는 콜백 함수를 메모이제이션할 때 쓴다. useCallback() 사용법 우선 useCallback을 임포트해야 한다 import { useCallback } from "react"; useCallback('콜백 함수', '의존성 배열') 첫번째 인자는 실행할 ..

React Hooks 리액트 훅은 16.8에 추가되었다. 리액트 개발은 훅 이전이 old 한 방식이라면 훅 이후는 완전히 다른 모던한 방식이라 앞으로 리액트를 개발할려면 반드시 사용해야 할 기술이다. 함 규칙 function(함수형) 컴포넌트에서만 사용할 수 있다. 클래스 컴포넌트에서 hook을 사용하면 안된다. 또한 단순한 자바스크립트 펑션에서 hook을 사용해서는 안된다 Top level에서만 사용할 수 있다. 루프내에서나 혹은 내부 함수나 조건문에서 사용해서는 안된다. 반드시 리액트 함수형 컴포넌트의 top 레벨에서 사용해야 한다. 특징 completely opt-in 훅을 적용하고 싶으면 적용할 수 있고, 원하지 않는다면 적용안할수도 있는 선택 옵션이다. 100% backwards-compatib..