React

[Next.js] 원티드 프리온보딩 FE 챌린지 10월 사전과제

CSR / SSR with Next.js Next.js는 프로덕션용 웹/앱을 쉽게 작성하도록 라우팅, 이미지 최적화 등 많은 기능을 지원하는 React의 프레임워크. SEO 등 비즈니스 목표 달성을 위해 필수적인 SSR, SSG 간편 구현을 목적으로 많은 기업에서 Next.js를 도입 중이다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤,..

[React] 컴포넌트의 생명주기(Lifecycle)

생명주기(lifecycle)란? 컴포넌트가 페이지에 렌더링되기 전 준비 과정부터 페이지에서 사라지는 순간까지를 생명주기라고 한다. 모든 리액트 컴포넌트는 생명주기를 가진다. 클래스 컴포넌트에서는 생명주기 메서드를 사용함으로써 컴포넌트가 처음 생성(mount)되어 렌더링될 때나, 업데이트 전후, 또는 제거(소멸, unmount) 시기에 해야 되는 작업들을 각각 처리할 수 있다. 자주 사용되는 생명주기 메서드에는 ⭐ 표시를 달았다. > 마운트(Mount) DOM이 생성되고 웹 브라우저 상에 나타나는 것을 말한다. 이때 호출되는 메서드는 다음과 같다. constructor⭐ static getDerivedStateFromProps render⭐ componentDidMount⭐ > 업데이트(Update) 💡 ..

[React] CRA에서 모듈 import 시 절대경로 사용하기

절대경로 설정 최상위 루트 폴더에 jsconfig.json 파일을 생성한 뒤, 아래 코드를 붙여넣어 준다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } TypeScript를 쓰는 경우엔 기존 tsconfig.json 파일에서 compilerOptions 설정을 수정하면 된다. ES6 모듈 import 시 현재 파일 위치 기준의 상대경로(../ ./)가 아닌 src 폴더를 기준으로 한 절대경로를 사용할 수 있다. 사용 예시 Home.js에서 Button 컴포넌트를 불러온다면, 상대경로 👉 import Button from '../components/Button' 절대경로 👉 import Button from 'components/Butt..

[React] 양방향/단방향 바인딩, 부모 컴포넌트의 state 바꾸기

↔ 양방향 바인딩? 양방향 데이터 바인딩에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터가 서로 양방향으로 흐른다. 부모와 자식 모두 데이터를 직접 변경할 수 있다. model(JavaScript)과 view(HTML)가 있을 때, 양방향 데이터 바인딩은 model이 업데이트 되면 view가 업데이트 되고, 반대로 view가 업데이트되면 model이 업데이트 되는 것이다. 이를 자동 동기화라고도 한다. 상호 구독 관계라고 생각하면 이해하기 쉽다. 하지만 변화 가능성이 열려있다 보니 데이터 흐름을 예상하기 어렵다는 단점이 있다. 이같은 단점의 대표적인 사례로 페이스북의 알림 버그가 있다. 👇 리액트는 단방향 바인딩 리액트에서 일반적으로 state 관리를 할 때는 props를 통해 부모에서 자식 컴포넌트로의..