프론트 엔드/React

[React] React Immutable

Immutable 이란? immutable은 react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리다. 불편함(Immutablity)를 지키며 상태관리하는 것을 편리하게 해준다. 설치법 npm install immutable Immutable의 필요성 Immutable은 이름에서도 알 수 있듯 객체의 불변성을 제공하는 라이브러리이다. react의 컴포넌트는 state 또는 상위 컴포넌트에서 전달받은 props(상태값)이 변할 때 리렌더링된다. 만약 직접 객체안에 내부 값을 직접 수정한다면 레퍼런스가 가리키는 곳은 같기 때문에 똑같은 값으로 인식한다. 따라서, 전개 연산자나 assgin함수를 이용하여 새로운 객체나 배열을 만들었지만 구조가 복잡할 경우에는 그 코드 또한 복잡한 방식으로 구성되었다...

[React] Virtual DOM 이란?

Virtual DOM이란? Virtual DOM은 말 그대로 가상 돔이다. 그런데, 가상 돔이 필요한 이유는 무엇일까? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있다. 브라우저 작동 방식 "브라우저 엔진" 과 "렌더링 엔진"은 무었일까? 그림에서 알 수 있듯이 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진이다. 렌더링 엔진은 HTML documents와 웹 페이지의 리소스들을 브라우저에 시각적으로 출력해준다. 브라우저가 화면에 그리는 과정 요청과 응답 만약 브라우저에서 어떠한 링크를 누르거나 URL에 주소를 입력하고 엔터를 누르면 그 페이지 안에서 HTML요청이 이루어지고 해당 서버에서 HTML document를 응답으로 준다. HTML 파싱과 D..

[React] React 조건부 렌더링

React 조건부 렌더링 이란? 조건부 렌더링은, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. React에서 원하는 동작을 수행하는 캡슐화된 별개의 컴포넌트를 생성할 수 있다. 또한 State에 의존하여 그 중 일부만 렌더링 시키는 것도 가능하다. 크게 3가지 방법으로 나눠 소개할 수 있다. if-else 조건문 논리 연산자 && 조건부 연산자 1. if - else 조건문 사용자가 로그인 하는 여부에 따라서 또는 컴포넌트를 표현하는 예시이다. function Gretting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { // 로그인 상태라면 return ; } return ; } ReactDOM.render( // Tr..

[React] JSX 문법이란?

JSX 란 무엇일까? jsx는 자바스크립트의 XML이다. 자바스크립트 문법의 확장판으로써 React에서 요소를 제공한다. JSX는 다음과 같은 특징을 갖는다. 컴파일에 최적화 되어있다. 컴파일 과정이 필요하기 때문에 변환하는 과정에서 오류가 있다면 빌드시 오류를 발생한다. 확장자는 .jsx 나 .js를 사용할 수 있다. JSX 코드의 변환 과정 jsx는 HTML 코드처럼 작성하지만 Babel(바벨)을 통해 자바스크립트 문법으로 변환된다. 이는 Babel 공식 홈페이지에서 실험해볼 수 있다. Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 위 홈페이지에서 try i..

[React] create-react-app & Typescript 초기 세팅법 완벽 정리

🥩 Typescript & create-react-app 최근 타입스크립트 강의를 들으면서 create-react-app을 설정하는 법이 궁금했다. 왜냐면 React 제일 많이 사용해보았고 포트폴리오도 React로 주 언어로 개발했기 때문이다. 그리고 앞으로 사용하게될 것이기도 하고, 언제까지나 JS계열로 프로젝트를 진행할 수 는 없다! 그리고 업무시 중요한 eslint 와 preiiter 설정도 해보자! 1. create-react-app을 이용해 typescript 버전으로 설치 2. eslint & preitter typescript 버전으로 설치 이 두가지 버전이 세팅에 가장 중요한 부분이다. 하지만 먼저 알아야 하는 사항들 세가지가 있다 1. Typescript를 사용하는 create-react..

[React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서

컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가지 카테고리로 나뉘며, 개괄적인 그림은 다음과 같습니다. 또한 컴포넌트는 LifeCycle마다 메서드를 가지고 있습니다. 이 메서드를 이용해 특정 시점에 원하는 동작을 하도록 만들 수 있습니다. 메서드에 대해서 더 자세히 알아보겠습니다. 컴포넌트 라이프사이클 메서드 알아보기 에러 처리 메서드를 제외하고 LifeCycle의 메서드는 총 8가지 입니다. 자주 사용되는 LfieCycle 메서드를 설명해보겠습니다. 1. Mounting 컴포넌트의 인스턴스가 생성되 DOM상에 삽입되는 단계입니다. Mounting은 ..

[React] useMemo와 useCallback

useMemo와 useCallback을 배우기 전 알야아 한 것 1. 함수형 컴포넌트는 그냥 함수다. 함수형 컴포넌트는 단지 jsx를 변환하는 함수 2. 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출해 실행되는 것을 뜻한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또는 다른 함수 등) 도 매번 다시 선언되어 사용된다. 3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받은 props가 변경되지 않더라도 리렌더링 되는게 기본) useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a,b),..

[React] 리덕스 (Redux)란 ?

리덕스(Redux) 란? 공식문서를 참조한 정의는 다음과 같다. 자바스크립트로 구동되는 어플리케이션에서 예측 가능한 상태관리를 도와주는 상태관리 라이브러리 그런데, React의 setState, Hooks의 useState로만 사용해서 구현해도 충분히 상태관리에 이상이 없는데 굳이 리덕스를 사용하는 이유는 무엇일까? 우리가 알고 있는 리액트에 상태관리는 각 컴포넌트 안에서 이루어지는데, 각 컴포넌트에 필요한 상태에 대해서는 각각의 컴포넌트 내에서 선언되고 수정된다. Redux는 (Flux 패턴을 활용) 전역상태를 관리하기 위한 라이브러리이다.(React,Vue,Angular에서 모두 사용 가능) 예를 들어 위 그림과 같이 컴포넌트 구성이 있다고 가정하고, 자식 컴포넌트6에서 자식 컴포넌트8로 상태를 전달..

[React]setState는 비동기 동작

React를 통해서 웹 개발을 하다보면 당연스럽게 만지게 되는 주요 메소드들이 있는데 그 중에 하나가 setState입니다. 1. setState는 어느 기능을 가지고 있는가? 리액트는 state가 변화될때 다시 render를 해주기 때문에 setState는 component를 re-render할때 꼭 필요합니다. 그런데 setState를 사용하다보면 state가 정상적으로 업데이트도지 않거나 조금 느린 템포로 업데이트되는 상황을 종종 찾아볼 수 있습니다. 그럼 이제 왜 그런 상황이 발생하는지 좀더 자세히 알아보도록 해보겠습니다. 2.setState를 조금 더 깊게 알아보자 setState를 알려면 본인의 소스코드에 대해서 잘 살펴보아야 합니다. CRA(create-react-app) 보일러 플레이트를 ..

[React] Stateful / Stateless

이번 시간에는 상태가 있는 Stateful Component 와 상태가 없는 Stateless Component에 대해 알아보겠다. 1. React의 Stateful Component 말그대로 State(상태)가 있는 Component를 말한다. class에서 this 인스턴스를 통한 state에 접근하고 상태를 관리함 CASE A. class선언후 생성자 인스턴스에서 this를 통한 state(상태)관리 // Here is an excerpt from the counter example constructor(props) { super(props); this.state = { count: 0 }; } CASE B. React Component Class 중 useState module을 사용해 상태관리 ..

[React] React Life Cycle 생명주기

시작하기 전에 리액트 라이프 사이클에 대해 정확하게 알고 있지 않기에 이 포스트를 작성하기로 했다.이 링크를 참고하면 좀 더 자세하게 LifeCyle을 이해할 수 있다. 앞으로 LifeCylcle의 업데이트된 사항을 위 링크에서 확인해 보고 이전과 비교하면 더 좋을 것이다. 1. 리액트에 라이프 사이클 이란 ? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 언어이다. 그렇다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질때 끝이난다. 위의 이미지는 리액트의 라이프 사이클을 나타낸 화면이다. 이제 이 각각의 메서드들이 어떤 역할을 하는 지 알아보겠다. 2. 라이프사이클의 분류 ..

[React] React Hooks이란?

1.Hook 이란? 상태 관리가 가능하고 라이프사이클 API를 사용할 수 있는 함수형 컴포넌트 리액트에서 컴포넌트를 정의하는 방법 리액트에서 컴포넌트를 정의하는 방법은 두가지 가 있다. 클래스형 컴포넌트 - state를 가지고 있어 상태 변화에 대한 관리를 할 수 있다. - 단계별로 라이프 사이클을 경험할 수 있고, 라이프 사이클 API를 사용할 수 있다. 함수형 컴포넌트 - 클래스형 컴포넌트에 비해 선언하기가 간편하여 주로 화면을 그리는 역할을 한다. - 메모리 자원을 클래스형 컴포넌트 보다는 덜 사용한다. - state와 라이프사이클 API 사용이 불가능 하다. 한마디로 클래스형은 stateful component, 함수형은 stateless component라고 할 수 있다. ※ 그러나 React ..