컴포넌트를 Pure, 즉 순수하게 작성하면 프로젝트의 코드 베이스가 커지더라도 사이드 이펙트를 피할 수 있다.자세한 이유와 방법을 알아보자. why?1. 컴포넌트는 서버와 같은 다른 환경에서 실행 가능하다. 동일 입력 - 동일 결과에 따라, 하나의 컴포넌트는 수많은 유저의 요청을 처리할 수 있다.2. input이 변경되지 않았을 때에는 캐싱된 것을 가져오기에 렌더링을 하지 않아 성능을 향상할 수 있다.3. 렌더링을 하다가 값이 중간에 바뀌었을 때 렌더링이 다시 시작되는 비효율이 발생한다. 이는 특히 컴포넌트 트리가 깊을 때 문제인데, 순수 함수는 이를 막을 수 있다. 순수 상태를 깨트리지 않기 위해 주의할 것1. same input 그리고 same output수학 공식처럼 y=2x 일 때, x가 3이면 ..

SPA(Single Page Application)인 리액트는 webpack과 같은 번들러를 통해 모든 코드가 하나의 javascript 파일로 번들링 되어 로딩된다. 이에 따라 사용자가 첫 페이지 진입 시 불필요한 코드로 인해 로딩이 느리게 될 수 있다. 브라우저에서는 javascript 파일을 모두 불러올 때까지 렌더링을 멈추기 때문이다. 렌더링 속도를 높이기 위한 방법으로는 코드 스플리팅(코드 분할)이 있다. 필요한 시점에 필요한 코드를 불러옴으로써 첫 렌더링을 빠르게 할 수 있다. 코드 분할의 방법으로 dynamic import, 즉 동적 import에 대해 알아보겠다. 기본 Import 기본적으로 import 한다면, 불러온 라이브러리는 빌드 시 함께 번들링이 된다. import { minus ..

모든 컴포넌트는 라이프사이클(= 생명주기) method를 가지고 있다. 이를 활용해 특정 시점에 코드가 실행되도록 작성할 수 있다. 라이프사이클은 크게 마운트(mount), 업데이트(update), 언마운트(unmount) 3가지로 나뉘며 각각 하위에 method들을 지닌다. 마운트 컴포넌트의 인스턴스가 생성되어 DOM에 삽입되는 시점을 Mount(마운트)라고 한다. 아래의 메서드들이 순서대로 호출된다. componentWillMount()는 리액트 공식문서에서 더 이상 권장하지 않는다. (2018년 기준) - constructor(props) React 컴포넌트의 생성자로, 마운트되기 전에 호출된다. 가장 먼저 실행되는 메서드이다. super(props)를 우선적으로 호출해야 한다. 그렇지 않으면 th..

안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..

클래스형 컴포넌트를 다루면서 이벤트 핸들러에 함수를 등록하는 과정에서 this를 제대로 불러오지 못했다. 어떻게 작성하는지에 따라 this 값이 달라지는 것이었다. this는 호출자에 의해 동적으로 결정된다. 따라서 this를 바인딩하여 원하는 값으로 불러올 수 있는 4가지의 방법들을 살펴보겠다. 1. bind() 메서드 this.이벤트명 = this.이벤트명.bind(this); 사용자가 만든 일반 함수를 bind 메서드를 통해 this로 사용할 객체를 전달하는 것이다. bind 메서드는 새롭게 this 값이 교체된 함수를 반환한다. 함수를 반환할 뿐이지 호출하지는 않기 때문에 apply, call 메서드와 다르게 이후에 직접 실행해야 한다. 위의 코드는 constructor() 또는 render()에..

vite 환경에서 환경변수 값을 주기 위해서는 기존의 CRA와 다르게 설정해야 한다.처음에는 CRA처럼 환경변수에 접근해서 값이 나오지 않았는데, Vite의 경우 prefix가 달랐다! 먼저 CRA에서 접근하는 방법을 알아보자.CRACreate-react-app으로 만든 React에서는.env 파일에서 REACT\_APP을 prefix로 붙여야 한다.그다음 이를 사용하기 위해서는 process.env 를 앞에 붙여서 사용한다.Vite환경변수 생성Vite의 경우, VITE\_를 prefix로 사용하여 환경변수를 생성해야 한다.# .envVITE_TEST_VALUE=123환경변수 사용그다음 앱에서는 import.meta.env로 값에 접근할 수 있다.dotenv 패키지도 필요가 없다.const TEST_VA..

새로 나온 리액트의 공식문서에서 따르면, 이제 리액트 프로젝트를 생성할 때 CRA의 사용을 지양한다. 따라서 next.js 또는 Remix, Gatsby와 같은 프레임워크와 함께 만들거나 Vite로 만들 것을 권장한다. 프로젝트 생성 npm create vite@latest yarn create vite npm 또는 yarn 중에서 선택해서 입력한다. 터미널에서 위의 명령어를 실행하면, 설정할 프로젝트 네임을 입력할 수 있다. 프레임워크 선택 React, Vue, Svelte 등 사용할 프레임워크를 선택한다. 언어 선택 타입스크립트 or 자바스크립트 선택 가능하며 SWC 빌드 툴도 선택할 수 있다. 생성 완료 생성이 완료되었다. npm install을 하면 node_modules 파일이 생긴다. npm..

원티드에서 진행하는 프리온보딩 프론트엔드 챌린지에 참가하였다! 사전 미션은 3월 말에 완료했으며 앞으로 2주 동안 기술 역량 향상의 시간을 갖는다! 전반적인 React의 개념을 훑기 때문에 개념 정리 + 현업 시니어 개발자의 시야를 알 수 있을 것 같아 기대가 되었다. 어제 3시간동안 온라인 교육을 진행하였고 리액트 개념부터 소소하지만 웃긴 QnA까지 즐거웠다!

3월 16일, 리액트의 새로운 공식문서가 출시되었다! 그동안 베타로 제공되었던 문서가 드디어 완료되었다. 이제 리액트 공식문서는 기존의 https://legacy.reactjs.org/ 에서 https://react.dev/ 로 변경되었다. 오 링크를 가져오고 보니 기존 공식문서 url에 legacy가 추가되었..다! 레거시가 되었다 - 기존의 공식문서에서 내용적으로도 구성적으로도 많이 변화가 생겼다. challenge처럼 각각의 챕터를 이해할 수 있는 테스트가 생겼고 내용의 이해를 돕기 위한 그림들도 추가되었다.