11/19[TIL]React

React를 사용하는 이유?

유저와의 인터렉션이 별로 없다면 간단히 html와 css로 구현이 가능하나 유저와의 인터렉션이 많아질수록 관리해야 할 돔(DOM)이 많아질수록 힘들기에 해결책으로 상태 값 관리와 수많은 돔 관리를 해주고 오직 기능 개발에만 집중할 수 있도록 해주는 것인 프런트엔드 라이브러리(프레임워크)가 만들어졌다. 그중에 React가 존재한다.

 

우리는 이 React라는 것을 쓰면서 코드의 재사용성 증가 및 직관적인 코드를 짤 수 있게 해 준다 라는 장점이 있다는데 일단은 차근차근 공부해 나가면서 차차 느낄 예정(?)이다. 앞서 말한 장점을 부각해주는 것이 컴포넌트(?) 단위로 개발해서 그런 것이라고 한다.

 

React는 기본적으로 ES6를 사용하는데 ES6에 있는 수많은 문법이 있는데 이 중에서 ES6의 7가지 개념은 알고 지나가는 것이 좋다고 한다. 아래에 있는 것 중에 Arrow function, Spread operator 등은 접해 봤었는데 생소한 부분은 시간 내서 살펴보아야겠다.

/ Destructring

/ Spread operator

/ Rest parameters

/ Default parameters

/ Template literals

/ Arrow function

/ For-of loop

 

 

JSX란?

처음에 보았을 때는 html과 비슷하다고 느낄 수도 있지만 js의 확장 문법으로 우리가 작성한 react 컴포넌트를 화면에 보여주기 위해 사용하는 것이다. 명심할 점은 반드시 jsx를 return 해주어야 한다는 것이다.

이 JSX를 사용하게 되면 코딩의 복잡도가 줄어들고 가독성이 좋아지게 된다.

 

여기서 바벨이라는 것이 있는데 바벨은 우리가 작성한 jsx를 기존의 dom 형식으로 바꾸어 주는 역할을 한다. 하지만 jsx가 바벨이라는 것을 통해 js로 바뀌는 것이기 때문에 지켜 주어야 할 규칙이 존재한다.

 

규칙 1 : 반드시 하나의 엘리먼트로 감싸야한다.

규칙 2 : jsx 내부에서는 js를 사용할 수 있는데 이때 {} 안에 작성하여야 한다.

규칙 3 : jsx 내부에서는 if문을 사용할 수 없다 그렇기에 IIFE or 삼항 연산자를 사용해야 한다.

규칙 4 : 엘리먼트 클래스 이름을 적용할 때 class 가 아닌 className을 사용해야 한다. 이유는 es6 문법 중에 class라는 키워드가 있어서 그렇다고 한다.

 

 

 

그렇다면 react의 개념 중의 컴포넌트, state, props, life cycle 등을 알아보도록 하자

 

 

우선 컴포넌트란?

하나의 작은 태그로 커스텀 태그라고도 불린다.

 

State

살면서 변할 수 있는 값

컴포넌트의 사용 중에 컴포넌트 내부에서 변할 수 있는 값

컴포넌트 내부에서 변화하는 값(나이, 현재 사는 곳, 취업여부, 결혼/연애 여부)

 

Props

외부로부터 전달받은 값(이름, 성별)

부모 컴포넌트로 전달받는다

순수 함수이다

 

출처 : https://cdn.filestackcontent.com/ApNH7030SAG1wAycdj3H

 

 

Life cycle

컴포넌트에 있어서 중요한 순간

1. 생성될 때 (생성)

2. 화면에 등장한(mount) 후 (생성) => componentDidMount

3. 새로운 props를 받을 때 (업데이트)

4. 새로운 상태를 가질 때 (업데이트)

5. 새로운 상태를 가지고 난 후 (업데이트) => componentDidUpdate

6. 화면에서 사라지기 (unmount) 후 (제거) => componentWillUnmount

 

매 중요한 순간마다 컴포넌트는 새로 렌더링 된다.

 

함수 컴포넌트에서는 라이플 사이클 메서드를 부를 수 없다 그렇기에 class 컴포넌트를 사용하여야 한다.

 

Life cycle을 사용하는 이유?

constructor, render에서는 fetch setTimout async/await 같은 비동기를 호출할 수 없다.

그렇기에 componentDidMount / componentDidUpdate에서는 비동기 호출을 할 경우나 상태를 가지고 다른 작업을 하여야 할 때 이 안에서 작업을 정의해 줄 수 있다.

 

예를 들자면 componentWillUnmount에 비워주거나 삭제하거나 해주는 것인 clearTimeout이나 removeEventListener 도 사용 가능하다.

react는 단방향 데이터 흐름이며 이는 데이터는 위에서 아래로 단방향으로 흐른다는 것을 의미한다.

이렇게 아래로 흐르는 데이터를 전달하는 방식은 props를 이용한다.

같은 레벨의(형제) 컴포넌트끼리는 상호작용을 할 수 없다.

그렇기에 같은 레벨의(형제) 컴포넌트끼리 상태를 공유하기 위해서는 공통의 부모에서 상태를 다루어야 한다.