2024. 01 .18 React 간단하게 알아보기

다사다난했던 JavaScript를 끝내고 React에 입문했다!!!!!!!!

 

React

• Facebook에서 사용자가 UI를 동적으로 만들 수 있도록 하기 위해 만들어냈다.
• React에 철학은 UI에 대한 업데이트는 상태 변경으로부터 발생해야한다!
• Single Page Application 이다.(하나의 페이지 즉 하나의 주소로)
• Livararies이다.

Framwork와 Librarise의 차이

 

Framwork❓ 무언가를 만들때 필요한 모든것이 주어진것.

Librarise❓ 작은 솔루션의 단위

 

 

Framwork  단점:

1. 규정하고 있는 모든것을 공부해야한다.
2. 자율성이 떨어진다

Librarise 단점: 

1. Framwork의 단점을 보완하고 있으나 UI만 만들 수 있다.

 

왜 React를 사용해야 할까?

 

React의 핵심 요소인 Virtual DOM(가상 DOM) 때문이라고 많은 사람들이 말하는 것 같다.

또 모두의 연구소라는 블로그에서 Oleksandr Hutsulak이 블로그에 쓴 글을 번역해 두었길래 읽어보았다.

 

1. 완성도 높고 이해하기 쉬운 개발 워크플로우

= 라이브러리에 최적화된 개발 인터페이스와 코딩언어

 

2. 뛰어난 유연성과 호환성

=한번 익힌 기술을 다양한 플랫폼에서 쉽게 재사용 할 수 있다.

 

3. 손쉬운 컴포넌트 재사용성

=별도의 컴포넌트를 만들기 때문에 생성된 컴포넌트를 쉽게 재사용 할 수 있다.

 

4. Virtual DOM으로 강화된 고성능

=DOM을 가상화해 메모리에 보관함으로써 모든 뷰 변경사항을 가상 DOM에 즉시 반영하고 빠른 속도의 렌더링 가능

 

5. Flux와 Redux의 힘

 

6. 다양한 툴 제공

 

7. React Native의 강력한 기능

=특정 코드를 재사용할 수 있는 기회를 잃게되지만, 적절한 네이티브 성능과 시스템 관리를 수행

 

8. 시장에 영향을 미치는 거대한 커뮤니티와 리소스

=GitHub에서 상위 5개 리포지토리 중 하나로 대규모 커뮤니티 지원을 받는다.

 

9. HTML 확장을 위한 JSX 구문

=매니폴드에 의한 DOM조작은 JSX를 사용하면 더 효율적이다.

  브라우저의 트리구조에  HTML과 React.js 컴포넌트를 전달해 유지보수가 쉬운 깔끔한 코드를 구축

 

10. React Hook

 

출처: https://modulabs.co.kr/blog/react-library/

 

React를 사용해야할 이유는 참 많은 것 같다.

물론 Vue, Angular, Preact, Inferno 등등 있지만 커뮤니티는 React를 따라올 라이브러리가 있을까? 하핫

 

 

React란 components에 집합체이다.

components를 정의하는 방식은 함수로 정의하는데,

components에서 가지고 있는 상태 관련된 데이터는 useState를 사용하고 변경 가능한 속성은 props로 전달!

 

좋은 components❓

: 고립되어있으며 독립적이고 재 사용성이 높게 만들어진 components 단위로 만들어 나가는 작업

 

components를 나누는 기준❓

1. 반복하지말고 재사용성이 있는 코드들은 다시 만드는 것이 아니라 재 사용할 수 있도록 만들어야 한다.
2. 하나의 components 안에서 너무 많은 API나 코드들을 가지고 있게 만들지 않고 단일 책임을 가질 수 있도록 만들어야 한다.

 

React를 사용할 때 알아두어야 하는 것!!

1. return문 안에는 1개의 태그만 존재해야 한다.
2. 함수의 이름 앞부분은 꼭 대문자로
3. 자바스크립트 문법을 사용할 때는 { } 사용하기
4. 상태가 바뀔때 리렌더링이 일어남!