react Hook을 통해 내가 원하는 인터페이스와 기능을 담은 나만의 커스텀 훅을 직접만들 수 있다. 그럼 간단하게 불러와서 사용할 수 있고, 코드의 중복도 없어 재사용에 있어 효율성이 극대화된다.그냥 함수를 하나 만드는 것이라고 생각하면된다. 컴포넌트 내부에 있던

useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다. 앞서 알아본 useMemo을 복습하면 useMemo는 자주 쓰이는 값을 메모이제이션 즉 캐싱해준다. 그리고 그 값이 필요할때 다시 게산을 하는 것이 아닌 useMemo를 통

컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이 있다. 먼저 useMemo 대해서 파헤쳐보자.useMemo에서 Memo라는 말은 Memoization을 뜻한다.동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 맨 처음 값을

리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 '단방향'으로 흐른다. 엄청 큰 컴포넌트 트리가 있다고 가정할 때 공통적으로 필요한 전역적인 데이터가 있을 수 있다. 예를 들어 userdata전역 데이터를 일일이 props로 단계별로

함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다.인자로 넣어준 초기값 value는 ref 안에 있는 current 에 저장이 된다. ref 오브젝트는 수정이 가능하기 때문에 언제든 원하는 값으로 바꿔줄 수 있다. 반환된 ref 는 컴포넌트의 전생애

리액트 hooks 중에서 가장 중요한 useEffect를 파헤쳐보자!! 화면에 척 렌더링되는 것을 Mount 다시 렌더링이 되는 것을 Update 화면에서 사라진 것을 Unmout > 특정 작업을 처리할 코드를 실행시켜주고 싶을 때 사용하는 것이 useEffect

리액트에서 함수현 컴포넌트를 사용하면 리액트의 편리한 hook을 사용할 수 있다. hook의 종류는 다양한데 그 중 가장 기본적이고 제일 중요한 useState를 다시 공부해보자. useState 란? 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공

얕은 라우팅 (shallow routing) Next.js에서 얕은 라우팅(Shallow Routing)은 데이터 가져오기 메서드를 다시 실행하지 않고 웹사이트의 URL을 변경하는 기능이다. 업데이트된 pathname 과 query의 상태를 잃지 않고, 업데이트 된

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있다. 바로 useEffect 이다.React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, c

리액트를 사용하기 전까지 특정 태그 즉 대상에 접근할 때 document.getElementById() 와 같은 selector 함수을 사용했다. 리액트를 사용할 경우 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. 하지만 리액트는 실제 DOM이 아닌 가상돔(vi

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법페이지네이션은 콘텐츠를 웹사이트의 또 다른 페이지들로 분리하는 방법이다. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지들을 탐색할 수 있고, 페이지네이션된 콘텐츠 일반적으로 몇 가지 공통된 주제

리액트는 단방향 데이터 흐름이다. 즉 부모만 자식에게 데이터를 줄 수 있고, 자식은 부모에게 데이터를 줄수 없다. 하지만 자식이 부모의 상태를 변경해야 한다면?이 때 lifting state up 이라는 것을 사용한다. 상위 컴포넌트에서 state를 변경시키는 상태변경

prev 란 임시저장 공간에 있던 값을 그대로 받아서 행동하는 도구이다.counter 예제를 참고하면 만약 5씩 증가시키기 위해 아래와 같이 식을 만들었다면setCount로 인해 count가 증가하면 그 값이 다시 전달되서 뿌려지기 때문에 첫번째 setCount만 실행

리액트 컴포넌트에는 생명주기(Life Cycle)가 존재한다. 이는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 떄 호출되는 메서드다.즉 특정 시점에 코드가 실행되도록 설정할 수 있다는 것이다. 컴포넌트 라이프 사이클은 크게 Mount , Update ,

Class Component vs Functional Component

리액트 컴포넌트에서 다루는 데이터는 두개로 나뉜다. 바로 props와 state 이다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정 할 수는 없다. 반면 stat

폴더구조분해 container component 자바스크립트 부분을 담고 있는 컴포넌트 동작 로직 데이터를 다루는 부분 redux 와 관련이 있음 렌더링 되어야 할 데이터를 props로써 데이터 처리 능력이 없는 컴포넌트인 presenter 로 전달 present

예외처리구문 try ~ catch 에러가 발생하면 스크립트는 즉시 중단되고, 콘솔에 에러가 출력된다 try ~ catch 문법을 사용하면 스크립트가 죽는 것을 방지하고, 에러를 잡아서 더 합당한 그 다음을 할 수 있게 한다. 1) 구조 기본적인 try catch