React 에서는 의견을 공유하는 https://github.com/reactjs/rfcs 라는 github repo 가 있다. 여기서 React 팀이 React core에 추가하려는 새로운 기능에 대해 토론하고 아이디어를 공유한다. 현재 use 라는 새로운 hook 에 많은 기대를 가지고 있다. https://github.com/reactjs/rfcs/pull/229 이곳에서 개발자들이 직접 사용해보며 발생하는 이슈에 대해 토론을 나누고 있다. 저 토론 글의 제목은 "Promise와 async / await에 대한 최고의 지원" 이라고 한다. 아직까지는 canary 와 experimental 모드에서만 사용이 가능하다. 언제 쯤 머지가 될지는 모르겠지만 미리 익혀두면 좋을 것 같아서 정리 해 보려 한다..

useHistory useHistory는 react-router-dom 안에 있는 객체이다. react-router-dom@5 버전까지 가능하며 react-router-dom@6 버전부터는 useNavigate 객체로 변경되었다. 사용법 const history = useHistory(); 변수에 useHistory를 추가해서 사용할 수 있다. 1. push history.push('/about')}>어바웃으로 push는 페이지를 이동 할 수 있다. go 라는 것도 똑같이 페이지를 이동하지만 두개의 차이점은 push는 prop을 전달 할 수 있다. 또한 히스토리 스택에 새 항목을 푸시한다. 2. go history.go('/about')}>어바웃으로 go 는 push와 비슷하게 사용된다. 히스토리 스택의..

Virtual DOM Why Virtual DOM? 요즘은 SPA (Single Page App) 이 트렌드로 자리 잡고 있다. SPA는 전체 페이지를 서버에서 매번 보내주는 것 이 아니라 브라우저에서 자바스크립트가 관리하기 때문에 DOM 조작을 효율적으로 할 수 있게 최적화가 필요해졌다. 그래서 기존 DOM을 직접 조작하면 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC자원을 많이 소모하게 된다. Virtual DOM 은 DOM의 복사본 또는 DOM의 추상화라고 표현한다. 기존 DOM과 같은 속성을 가지고 있지만 API는 가지고 있지 않으며 데이터가 변경되면 전체 UI는 Virtual DOM 에 렌더링이 된다. 그리고 바뀐 부분만 실제 DOM에 반영이 된다. Virtual DOM은 자바스크립트 객체를..

오늘 정리 할 useMemo, useCallback 은 컴포넌트의 최적화에 도움을 준다. 이 두개는 모두 React Hook이다. 컴포넌트의 불 필요한 렌더링을 방지하고자 나온 Hook 이다. 이 전에 알아야 할 기본지식이 있다. 두가지의 Hook의 설명에는 메모이제이션(memoization) 이라는 단어가 들어간다. 메모이제이션(memoization) 이란 - 컴퓨터 프로그램이 동일한 계산을 반환할 때 이 전의 계산한 값을 메모리에 저장해 놓는다는 뜻이다. 예를 들어서 이미 시험을 볼때 풀어본 문제는 다시 풀어보지 않아도 답을 기억하고 있다는 것이다. - 즉 반복적인 수행을 제거하여 프로그램의 실행 속도를 높인다. useMemo memoization 을 이용해서 처음의 값을 저장해놓고 props 의 변..

공식문서 => https://ko.reactjs.org/docs/hooks-reference.html#usestate Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org state 란? 계속해서 변화하는 특정 상태를 의미한다. 상태에 따라 각각 다른 동작을 한다고 말한다. 컴포넌트에서 동적인 값을 상태(state)라고 부른다. React 에서는 useState라는 메서드를 지원한다. 배열을 반환하며 비구조화 할당을 통해서 받아온다. const [state, setState] = useState(initialState); 0번째 index는 state의 값으로 사용되고 1번째 index는 0번..