원티드에서 진행하는 4월 프리온보딩 프론트엔드 챌린지 내용이 React 랜더링, 최적화에 관한 내용이라 들어보고 싶어서 신청하였다. 사전과제로 아래와 같은 4가지 질문이 있어서 공부하면서 내용을 정리해보았다. React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기가 존재하고 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 클래스 컴포넌트에서는 라이프사이클이 컴포넌트 중심에 맞춰져 있다. 컴포넌트가 마운트되려 할 때, 마운트 되고나서, 업데이트 되었을 때, 언마운트 될때 실행된다. 모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할..
ChatGPT에게 사람들이 React를 사용하는 이유가 무엇인지 물어보았다. chatGPT의 답변을 정리해보자면 사람들이 React를 사용하는 이유는 다음과 같다. 1) 재사용이 가능한 컴포넌트 기반 개발이 가능하여 복잡한 UI를 쉽게 관리할 수 있다는 점. 2) Virtual DOM (가상돔)을 사용함으로써 페이지의 나머지 부분에 영향을 주지않고 UI 변경사항을 빠르게 업데이트하고 렌더링하여 성능을 향상시킬 수 있다는 점. 3) 선언적 구문을 사용하여 코드 작성 및 추론이 쉬워진다는 점. 4) 온라인 포럼 및 리소스를 통해 지원을 제공하는 대규모 개발자 커뮤니티가 존재한다는 점. 5) 다른 라이브러리 및 프레임워크와 함께 사용할 수 있어 유연하고 다양한 프로젝트와 호환된다는 점. 6) 확장가능하도록 설..
아래와 같은 jsx코드가 있다고 했을 때 {user.name} {board[0]} {board[1]} 화면에는 아래처럼 그려진다. 윤두준 잘생겼다. 귀엽다. 그런데 데이터에 수정이 생기면, 예를 들어 "윤두준"을 "양요섭"으로 바꾸면 화면을 다시 그려야 화면에 보여지는게 바뀐다. 화면을 다시 그리기 위해 h1, ul 모두 다시 그릴 필요없이 바뀐 h1의 텍스트("윤두준")부분만 바뀌면 가장 좋을 텐데 리액트는 React Element로 되어있기 때문에 최소한 Element 단위, 여기서는 h1 Element를 다시 그린다. JSX는 아래와 같은 형태의 자바스크립트 코드로 컴파일되는데 React.createElement(component, props, ...children) 그럼 위 jsx의 h1과 ul은..
1️⃣ React 앱 배포 Overview 인터넷에서 내가 만든 앱에 접근할 수 있어야 한다. 지속적으로 앱을 수정하고 배포해야 한다. Public IP 주소로 직접 접근할 수 있도록 해야 한다. IP를 부여받은 서버에 React 앱을 배포 → 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 → 사용자는 IP를 통해 앱에 접근 ▶ React 앱 배포 프로세스 1) IP를 부여받은 서버(VM)에 React 앱을 배포 2) 앱을 빌드하고, 웹서버를 세팅 3) 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 4) 사용자는 필요한 데이터를 받아 앱을 로딩 💡 프론트엔드 앱 배포 시 유의할 점 - 서버와 통신 시, CORS가 허용되었는지 점검해야 한다. - 브라우저, 디바이스별로 앱이 정상적으로 동작하는지 점..
1️⃣ Server Side Rendering 소개 ▶ Server Rendering , Client Side Rendering, Server Side Rendering Server Rendering - React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다. - 클라이언트는 별도의 처리 없이 웹페이지 노출한다. Client Side Rendering - Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 되었다. - 데이터는 XML, JSON 형태로 클라이언트에 전송된다. 장점 - CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다. - 자바스크립트를 최대한도로..
1️⃣ React 테스팅 ▶ 코드 테스트가 필요한 경우- 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다.- 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다.- 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다.→ 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. ▶ 테스팅 코드 작성의 이점- 언급한 상황들에 대한 테스팅 코드를 작성하여 미연의 에러를 방지한다.- TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상한다.- 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다.- ..
나는 React를 처음 배울 때부터 useState나 useEffect 등의 Hooks을 사용하여 함수 컴포넌트를 작성하는 것부터 배웠지만 React에서 Hooks를 사용한 함수형 프로그래밍이 가능하게 된 것은 2019년 React 버전 16.8부터로 그렇게 오래되지 않았다. 이 Hooks의 역사는 recompose라는 라이브러리에서 시작되었다. recompose 깃헙 레포지토리는 현재 읽기 전용으로 변경되었지만, 아래 README 내용을 보면 우리가 알고있는 useState와 비슷한 형태로 사용이 가능다는 것을 알 수 있다. 이 recompse라는 라이브러리가 리액트 팀에 인수되었고, 리액트에서 Hooks가 릴리즈된 것이다. 먼저, 간단한 카운터 예제를 통해 class를 사용한 코드과 hook..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org React 상태 관리 ▶ 상태 관리에 사용되는 Hooks useState, useRef, useContext, useReducer 외부 라이브러리 없이 React가 제공하는 Hook만으로 상태 관리를 구현하기 위해 사용한다.함수형 컴포넌트에 상태를 두고 여러 컴포넌트 간 데이터와 데이터 변경 함수를 공유하는 방식으로 상태를 관리하게 된다. 1) useState const [ state, setState ] = useState(initState | initFn) - 단순한 하나의 상..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org Flux Pattern ▶ Flux Pattern 이란? 2014년에 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴 - Unidirectional data flow를 활용, 데이터의 업데이트와 UI 반영을 단순화한다.- React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계되었다.- redux, react-redux 라이브러리의 Prior art. ▶ Flux Pattern vs. MVC Pattern MVC Pattern 애플리케이션을 Model, V..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org React 상태 관리 ▶ 상태 관리 기술이란? 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함한다. ▶ MPA와 SPA에서의 상태 관리 MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않는다. SPA에서는 자체적으로 데이터를 갖고 서버와의 동기화가 필요한 데이터만을 처..
