NYchicken's blog ;

우리는 페이지를 이동할 때 태그를 이용한다. 하지만 NextJs 에서 페이지를 이동하려고 한다면 에러가 뜨고만다. 안뜰수도 있지만... React 에서 React Router Link 를 사용해야 하는 것처럼 NextJs도 페이지를 이동할때는 특정 컴포넌트를 사용해야한다. 태그를 사용해 페이지를 이동하게 된다면 페이지 전체가 새로고침되는 것을 볼 수 있다. 이는 CSR (Client Side Rendering) 네비게이션이 없다는 것인데, CSR 은 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 떄문에 필요한 부분만 리로딩 없이 서버로부터 값을 받아 화면을 갱신한다. 다른 페이지로 이동하기 위해서는 전체 페이지를 새로고침해야 한다는 것이다. 이때 발생하는 문제로는 페이지 로딩이 느려 보일수 있고, ..

앞의 포스팅을 잘 따라해 Nextjs 프로젝트를 문제없이 생성했다면 이런 파일구조를 가진 폴더가 생긴다. 🥨 Pages Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 export된 React Component 이다. 각 페이지는 그들의 파일 이름을 기반으로 route 된다. 별도의 React router Dom 을 다운 받을 필요도 없고, 설정도 안해도 되고, router 안만들어도 되고, 컴포넌트도 import 해야하고... 굉장히 편리하다! 따라해보자. pages 안에 들어있는 각 컴포넌트들은 하나의 페이지로 사용된다. 참고로 앱의 홈은 기본적으로 index.js 이다. 🥨 Next.js 의 Rendering 🍳 알고가야하는 개념(1) CSR (Cl..

NextJs 는 React 의 프레임워크이다. 서버사이드렌더링 (SSR) 을 쉽게 구현할 수 있도록 도와준다. 공식 홈페이지에서는 - 직관적인 페이지 기반 라우팅 (동적 라우트 지원) - 각 페이지 마다 사전 렌더링, SSG(Static Generation)과 SSR(Server Side Rendering) 페이지 단위 지원 - 빠른 페이지 로드를 위한 자동 코드 분할 - 최적화된 프리패칭을 갖춘 클라이언트 사이드 라우팅 - 내장 CSS 및 SCSS 지원, 다른 CSS-in-JS 라이브러리에 대한 지원 - 개발 환경에서 빠른 새로고침 지원 - 서버리스 Functions 를 사용한 API 엔드 포인드 빌드 - 넓은 확장성 이라고 한다. 엄청나... 빠르고 쉽게 NextJs 로 프로젝트를 만들어 보자! Ne..

이제 Redux-toolkit 를 사용해보자. Redux 를 안쓰는 이유는 Redux 외에도 Redux-actions 나 Redux-thunk 등등.. 설치할게 추가적으로 많다고 한다. 깔끔하게 하나만 사용하기 위해 그리고 최신 라이브러리 사용을 위해 ^^ Redux-toolkit 를 써보려고 한다. * 만약 기존 프로젝트에 Redux 가 설치되어있다면 삭제하고 깔아도 무방! Redux 설치/셋팅하기 1. 일단 설치하자 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 2. store.js 파일을 생성하자 그리고 상태관리할 state 를 선언하자~ import { configureStore, createSlice } from "@re..

redux 는 간단하게 상태관리를 도와주는 라이브러리다. 기본적으로 React 에서는 자식컴포넌트 간의 직접적인 데이터 전달은 불가능하다. 컴포넌트가 많아지면 상위에서 하위로 데이터를 보내줄 때 수많은 props 를 거쳐야 할텐데 이렇게 되면 상태관리가 굉장히 복잡 해지게 된다. -> 이걸 Props drilling 이슈 라고 한다 Redux 를 사용하게 된다면 전역으로 상태를 관리해주는 저장소를 제공 받을 수 있다. 어디서든 저장소에 접근해 상태관리를 할 수 있다는 뜻이다! Redux 기본 개념 🧬 액션 (Action) 상태를 업데이트하는데 필요한 정보를 담은 객체다. action 객체는 반드시 고유한 type 프로퍼티를 가져야하며, 이 값은 action 의 이름이다. 🧬 액션 생성 함수 (Action..

컴포넌트 최적화에 사용되는 hook은 useMemo와 useCallback이 있다. 이번엔 useMemo 를 다룬다! useMemo 란? useMemo의 Memo 는 memoization 을 의미한다. 동일한 값을 리턴하는 함수를 반복적으로 호출해야할 때, 맨 처음으로 값을 계산할 때 그 값을 메모리에 저장해 필요할 때 마다 메모리에서 꺼내 쓰는 기법이다. 혹은 자주 쓰는 값을 맨 처음 계산할 때 캐시메모리에 저장해 재사용하는 것이다. 렌더링이란 Component 함수가 호출되는 것이다. 이렇게 함수가 호출될 때 마다 내부에서는 모든 변수가 초기화 되는 상황이 발생한다. 컴포넌트가 반복적으로 호출되어도 초기화 되지 않게끔 우리는 useMemo 를 사용할 수 있다. useMemo 동작 순서 1. Compo..

useContext 를 사용해야하는 이유 React 컴포넌트는 부모에서 자식으로 props 를 통해 데이터를 전달해야한다. 이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다. 중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트 까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... 하지만 Context 를 사용하게 된다면 컴포넌트의 재사용성이 떨어지므로 잘 생각..

useRef 사용하기 const ref = useRef(value); ref 의 초기값은 useRef에 선언하며, ref 는 {current: value} 의 형태로 저장된다. 해당 객체는 수정이 가능하기 때문에 언제든 바꿔줄 수 있다! 그리고 컴포넌트가 unmount 되기 전까지는 값을 유지한다. useRef는 변경 가능한 객체를 반환한다. 반환된 객체는 useRef의 인자를 current 라는 속성에 저장한다. 반환 객체는 컴포넌트가 unmount 될 때 까지 지속된다. useRef 는 Ref 가 변해도 re-render 되지 않으며, re-render 되어도 Ref는 유지된다. 값이 아무리 바뀐다고 해도 렌더링이 일어나지 않기 때문에 성능적인 부분에서 유리하다. 사용 예시 1. 저장공간 state ..

Hook은 React 16.8 버전부터 새로운 요소로 추가되었다. 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 된것! useEffect 훅이란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있게 하는 Hook이다. useEffect를 사용하게 되면 함수형 컴포넌트에서 부가기능(side effect) 를 사용할 수 있게 된다. 이때의 특정 작업(side effect)란 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들을 의미한다. useEffect 안에 적는 코드들은 - 복잡한 알고리즘 연산을 해야하는 경우 - 서버와 통신해 데이터를 가져오는 경우 - 타이머를 장착해야하는 경우 - ... 이제 함수형 컴포넌트에서도 생명 주기 메..

컴포넌트에 다른 컴포넌트 담기 props children 사용해 컴포넌트 합성 (1) function BigComponent() { return ( 합성을 위한 부모 컴포넌트 입니다 JSX를 중첩해 임의의 자식을 전달 할 수 있습니다! ); } function SmallComponent(props) { return ( {props.children} 자식 컴포넌트입니다 ); } props 의 children 을 사용하게 되면 자식 엘리먼트를 그대로 출력할 수 있다. 이렇게 다른 컴포넌트에서 JSX를 중첩시켜 임의의 자식을 전달할 수 있게 되는 것이다. props children 사용해 컴포넌트 합성 (2) function SplitSection() { return ; } function SideSectio..