🌳Frontend/react

참고자료 https://post.naver.com/viewer/postView.nhn?volumeNo=29116858&memberNo=10070839 https://velog.io/@diclfn42/Next.js-Shallow-routing-%EC%9D%B4%EB%9E%80 https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating 시작하기 앞서 상태에 대한 부분들을 URL 값 파라미터에 반영되는 방식을 구현하고자 했다. 이렇게 했을 때 장점은 아래와 같다. 모든 사용자들의 동작들이 URL 파라미터로 기록된다. 그래서, 그 URL을 누군가에게 공유했을 때, 내가 보고있었던 페이지 그대로 볼 수 있을 것이다. ..

사전지식 프로세스 단순히 실행중인 프로그램 운영체제에 의해 메모리를 할당받아서 실행중인 것 쓰레드 프로세스 내에서 실제로 작업을 수행하는 단위 즉, 프로세스의 실행 흐름의 최소 단위 애플리케이션을 실행시키면, 스레드들이 자기가 맡은 일을 한다. 예시 카카오톡을 실행했을 때 메세지를 전송하는 역할을 가진 스레드가 실행 메세지를 수신하는 역할을 가진 스레드가 실행 여러개의 스레드는 프로세스가 실행되기 위해 각자 역할을 도맡아서 일을 한다. 리엑트에서의 스레드 리액트 코드가 실행되는 브라우저(자바스크립트 환경) 에서는 단 하나의 스레드만 실행된다. 만약, 리액트 state 가 업데이트 될 때 실행되는 순서 1. 사용자 입력을 받아 상태 업데이트 2. `render()` 함수 실행 3. `Reconcile` 과..

https://www.daleseo.com/react-children/ React의 Children API 사용법 Engineering Blog by Dale Seo www.daleseo.com 컴포넌트의 Props로 넘어온 children props와 Children API를 다뤄보자. children props 컴포넌트 함수의 props에 넘어온 컴포넌트 자식이 넘어온다. Children API children props를 효과적으로 다룰 수 있도록 제공하는 API children props children props는 아래처럼 다양한 경우로 넘어올 수 있다. // HTML 요소나 React 요소, 문자열이 넘어올 수도 있다. Text {100} // 함수가 넘어올 수도 있다. (보통 function..

JSX Javascript 의 확장문법. 클래스형 컴포넌트: `render` 메소드에서 `ReactNode` 리턴 함수형 컴포넌트: `ReactElement` 를 리턴 JSX는 바벨에 의해 `React.createElement(component, props, ...children)` 함수로 transfile됩니다. //jsx Hello {this.props.toWhat} // transpile React.createElement('div', null, `Hello ${this.props.toWhat}`); React.createElement(Hello, {toWhat: 'World'}, null); 이 `React.createElement`를 호출하면, `ReactElement`, `JSX.Element..