모던 리액트 Deep Dive
1.리액트 개발을 위해 꼭 알아야 할 자바스크립트 (1)
모던 리액트 Deep Dive 공부 정리본 입니다. 😊
2.리액트 개발을 위해 꼭 알아야 할 자바스크립트 (2)
자바스크립트는 싱글 스레드로 작동한다. 즉, 한 번에 하나의 작업만 동기 방식으로 작동한다. 그러나 이러한 싱글 스레드 기반의 자바스크립트에서도 많은 양의 비동기 작업이 이루어지고 있다. 해당 방식을 이해해보자!
3.리액트 핵심 요소 깊게 살펴보기 (1)
JSX는 반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미있는 자바스크립트 코드로 변환된다. JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다. (JSX 내부에
4.리액트 핵심 요소 깊게 살펴보기 (2)
2.3 클래스 컴포넌트와 함수 컴포넌트 클래스 컴포넌트 constructor() : 초기화되는 시점에 호출된다. 여기에 선언돼 있는 super()는 컴포넌트를 만드면서 상속받은 상위 컴포넌트, 즉 React.Component의 생성자 함수를 먼저 호출해 필요한 상위
5.리액트 훅 깊게 살펴보기 (1)
3.1 리액트의 모튼 훅 파헤치기 useState 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다. 아무런 값을 넘겨주지 않으면 초깃값은 undefined이다. 다음과 같은 예시는 버튼을 클릭해도 변경된 state값이 렌더링 되지 않는다. 리액트의 렌더링은 함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해...
6.리액트 훅 깊게 살펴보기 (2)
자바스크립트에서 재사용 로직을 작성하는 방식 외에도 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두가지 방법이 있다. 사용자 정의 훅과 고차 컴포넌트이다.
7.서버 사이드 렌더링 (1)
싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다.
8.서버 사이드 렌더링 (2)
리액트 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공한다. 이 API는 Node.js와 같은 서버 환경에서만 실행할 수 있으며 window 환경에서 실행 시 에러가 발생할 수 있다.
9.리액트와 상태관리 라이브러리 (1)
여기서 상태는 어떠한 의미를 지닌 값이며, 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.Flux 패턴의 등장당시에는 웹 애플리케이션이 비대해지고 상태도 많아짐에 따라 어디서 상태가 변했는지 등을 추적하고 이해하기가 어려운 상황이었다고 한다. 페이스북 팀은
10.리액트와 상태관리 라이브러리 (2)
useState와 비슷한 훅인 useReducer는 지역상태를 관리할 수 있는 훅이다.useState는 useReducer로 구현되었는데, 이를 실제 코드로 작성하면 다음과 같다.
11.리액트 개발 도구로 디버깅하기
리액트 팀은 리액트 애플리케이션의 원활한 개발을 위한 개발 도구인 React-dev-tools를 만들어 제공하고 있다.
12.크롬 개발자 도구를 활용한 애플리케이션 분석
자바스크립트 메모리, 네트워크, 소스, 실제 HTML 및 CSS등 리액트가 아닌 일반적인 웹 애플리케이션 환경의 디버깅을 수행하려면 리액트 개발 도구가 아닌 좀 더 범용적인 도구를 활용해야 한다.
13.좋은 리액트 코드 작성을 위한 환경 구축하기 (1)
좋은 코드를 작성할 수 있는 환경을 구축하는 것이 코드 작성만큼 중요하다.
14.좋은 리액트 코드 작성을 위한 환경 구축하기 (2)
테스트 코드는 소프트웨어의 코드를 100% 커버하기 위해, 혹은 테스트 코드가 모두 그린 사인을 보기 위해 작성하는 것이 아니다. 개발자가 간순 코드 작성만으로 쉽게 이룰 수 없는 목표인 소프트웨어 품질에 대한 확신을 얻기 위해 작성하는 것임을 기억하자!
15.리액트 17과 18의 변경 사항 살펴보기 (1)
리액트 17버전은 16버전과 다르게 새롭게 추가된 기능이 없으며 호환성이 깨지는 변경사항을 최소화했다는 점이 가장 큰 특징이다!
16.리액트 17과 18의 변경 사항 살펴보기 (2)
useId는 컴포넌트별로 유니크한 값을 생성하는 새로운 훅이다. 컴포넌트 트리에서 컴포넌트가 가지는 모든 값이 겹치지 않으면서도, SSR환경에서 하이드레이션이 일어날때 서버와 클라이언트에서 동일한 값을 가져야 에러가 나지 않기 때문에 이점도 고려해야한다!
17.Next.js 13과 리액트 18 (1)
13버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립돼 있었다.무언가를 집어 넣을 수 있는 곳은 \_document와 \_app이 유일했다! 이제는 layout 과 서버 컴포넌트 까지?
18.Next.js 13과 리액트 18 (2)
기본적인 서버 컴포넌트의 제약은 동일하다. 서버 컴포넌트는 클라이언트 컴포넌트를 불러올 수 없으며, 클라이언트 컴포넌트는 서버 컴포넌트를 children props로 받는 것만 가능하다!