데이터

계속적으로 react만 쓰다보니 오랜만에 Next.js 쓰다가 바뀐 점이 보여 이에 대해서 서술하고자 한다.1. 구성 요소 계층 변화경로에서layout.jstemplate.jserror.js :(React 오류 경계)loading.js : (리액트 서스펜스 경계)not-found.js : (React 오류 경계)page.js중첩된 경로에서 세그먼트의 구성 요소는 부모 세그먼트의 구성 요소 안에 중첩된다 .2. 공동 배치Next.js 12에서는 pages 디렉토리를 최상위 디렉토리로 가지고 있었다. 그 안에 파일들의 이름으로 url이 자동으로 라우팅되었다.지금은 Next.js에서 app 디렉토리를 최상위 디렉토리로 지정한다. 모든 파일들이 자동으로 라우팅되는 것이 아니라, 폴더 안에 page.js와 rou..

react의 기본 개념이 부족해서 값을 전달하거나 받아오는 것에 한계를 느껴 기본 개념을 정리하다가 글을 쓰게 되었다. 개념 컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터이다.(단방향 데이터의 형식의 흐름을 갖는다) properties의 줄임말이다. props는 읽기 전용으로, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다. 순수함수 → 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문 function sum(a, b) { return a + b; } 순수함수 ❌ → 자신의 입력값을 변경하기 ..