TIL - 21.07.08 👨‍💻 - React

React

리액트란, 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이고 비슷한 라이브러리로는 Vue.js 같은 것들이 있다.

리액트의 대표적인 특징으로 3가지가 있는데,

1. 선언형이라는 점,
2. 컴포넌트 기반이라는 점,
3. 라이브러리이기에 범용성이 좋다는 점이다.

선언형 (Declarative)

선언형이라는 뜻은 명시적, 즉 코드의 의미를 분명히 알 수 있게 작성된다는 뜻이다.
기존 DOM에서 HTML, CSS, JS로 한 페이지르 ㄹ만들땐 각 코드가 적힌 파일을 오고가며 페이지의 구성을 파악해야했지만, 리액트로 개발할땐 한 페이지의 구성을 한 파일에서 직관적으로 파악할 수 있다.

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어 놓은 컴포넌트를 기반으로 개발한다.

컴포넌트를 분리해 하나의 기능에 집중하기에 해당 기능이 구현된 컴포넌트는 재 사용성도 좋아지고 컴포넌트의 용도를 보다 명확히 파악 할 수 있다.
게다가 차후 에러 발생시 유지보수 난이도도 낮아지고 기능을 테스트할때 컴포넌트만 따로 때서 테스트 해볼 수 있기에 테스트 난이도도 보다 낮다는 장점이 있다.

범용성

리액트는 자바스크립트 라이브러리이기에 다른 자바스크립트 프로젝트에도 유연하게 적용 시킬 수 있다.
게닥 글로벌 IT 기업인 Facebook에서 유지, 관리하는 라이브러리이기에 유지보수도 잘될 뿐더러 형제 격의 언어인 리액트 네이티브로 모바일 개발 역시 가능하다.

JSX

리액트에서는 UI를 구성하는 문법으로 JSX(JavaScript XML)을 사용하며 JSX는 이름에서 유추 할 수 있듯 자바스크립트를 확장한 문법이다.
우린 이 JSX를 이용해 리액트의 문법을 작성할 수 있다.

JSX는 자바스크립트가 확장된 것이긴 하지만 브라우저가 바로 실행할 수 있는 문법은 아니기에 'Babel'로 브라우저가 실행할 수 있게 컴파일 해줘야 한다.

기존 DOM에서 웹 페이지 개발을 할땐 HTML, CSS, JS 세가지 문법을 이용했지만 리액트로는 JS, CSS 두가지 문법만 가지고 개발 할 수 있다.
컴포넌트 구현을 위해 확인해야 할 파일이 줄고 쉽게 컴포넌트를 확인 할 수 있게 된 것이다.

주요 JSX 문법

1. 여러 요소를 사용할때 최상단에 여는 태그와 닫는 태그로 감싸줘야함.

let func = () => {
 return (
   <div>Division 1</div>
   <div>Division 2</div>
 ) 
}
// 이런 식으로 여러 요소를 반환하게 작성하면 오류 발생한다.
// 그래서 제일 겉에 <div> 태그 같은 것으로 감싸줘야한다.

2. 클래스 부여는 class=''가 아닌 className=''

3. JSX에서 호출할땐 중괄호를 이용한다.
   사용하지 않으면 일반 텍스트로 인식한다.

4. 리액트 컴포넌트의 이름은 첫 글자를 대문자로 사용하며 이는 파일명에도 해당된다.

5. 조건문은 if문이 아닌 삼항 연산자를 사용한다.
   if문은 표현식이 아니기 때문이다.

6. 리액트에서 여러 HTML 요소를 표시할땐 map() 함수를 사용한다.
   다만 바닐라에서 사용할때와 다르게 반드시 key 속성이 필요하다.
   키는 map 메소드의 내부에 있는 첫 요소에 속성으로 넣어준다.

화살표 함수 사용시 주의점

const func = () => () ;
이런 식으로 사용할때 => 뒤에 올 함수의 내용을 중괄호로 묶으면 return을 명시해줘야 하고 소괄호로 묶거나 괄호를 사용하지 않으면 => 이후의 내용이 반환된다.

GOOD 😉

오늘 리액트를 핥아봤다.

BAD 😥

그래도 고차함수까지는 좀 친해질 껀덕지가 보였는데 이놈의 리액트는 철벽을 쳐서 슬프다.

TO DO 🔥

• React
  • 노마드코더 리액트 클론코딩(주말)
  • 유튜브 코딩앙마님 리액트 기초강의 듣기
    
    
• Node.js

Retrospect 🧐

오늘 스플린트 제출 최저선은 가볍게 넘겼는데 어드밴스드 푼다고 진짜 안돌아가는 머리 너무 쌩쌩 돌렸다.
근데 이게 내가 돌린다고 돌아가야 말이지..

Reference 🙇