🔑 키워드 : #Component #JSX #CRA
리액트(React) : 페이스북에서 개발한 사용자 인터페이스(UI)를 만드는데 사용하는 자바스크립트 라이브러리. 작은 단위의 UI 조각을 모아서 전체 그림을 만들어주는 도구.
리액트(React) 알아보기
제이쿼리(Jquery)
JavaScript를 기반으로 한 라이브러리는 Angular, Node.js, Vue.js, React, Jquery등으로 다양하다.
2020년 하반기까지만해도 프론트엔드 쪽에서는 제이쿼리(Jquery)의 사용률이 우세했었다.
개발 당시 모토였던
“write less, do more(적게 작성하고, 많은 것을 하자)”
만 봐도 알 수 있듯이 단순하고 간략한 구문 만으로 네트워크, 애니매이션 등 다양한 기능을 구현하고 크로스 브라우징이 가능하다는 이점 때문에 2006년에 탄생한 이후로 10년이 넘게 쭈욱 선호되어 왔다.
그러나 최근 2년 사이에 제이쿼리 선호도가 조금씩 하락하게 되었다.
수많은 이유들이 있겠지만 크롬의 등장과 IE의 사망(?) 그리고 가상돔(Virtual DOM)을 사용하는 더 가벼운 라이브러리인 리액트(React)의 등장이 한몫을 했다고 본다.
웹에이전시에서 일할 때도 제이쿼리가 브라우저의 성능을 저하한다는 이유로 앞으로 사용을 지양하겠다는 고객사들이 있었다. 실제로 한 글로벌 기업은 리액트를 기반으로 웹사이트를 리뉴얼하였다.
그러나 이미 제이쿼리를 사용하여 구축한 웹사이트가 많고
제이쿼리의 차기 버전에서 단점들을 최소화하려는 움직임이 있어 그리 쉽게 쇠락하지는 않을 것으로 본다.
참조
https://www.samsungsds.com/kr/insights/jquery.html
https://w3techs.com/technologies/comparison/js-jquery,js-react,js-vuejs
리액트(react)의 등장
UI를 만들기 위한 자바스크립트 라이브러리
✅ 어떻게 하면 '간편하고 빠르게' 웹 어플리케이션을 만들 수 있을까? 라는 고민에서 시작
✅ 2013년에 페이스북에서 오픈소스로 공개
✅ 2015 React Native 등장(모바일 어플리케이션)
프레임워크/라이브러리 선호도 조사 결과 Jquery를 앞지름
하나만 배워도 여러 곳에서 적용 가능하다는 이점이 있음
SPA(Single Page Application)
한 페이지 내에서 자유자재로 동작 가능. 어떤 버튼을 클릭했을 때 재로딩이 이루어지는 것이 아니고 한 페이지 안에서 자연스럽게 동작하기 때문에 반응속도가 빠름.
CSR(Client Side Rendering)
사용자 화면에 접속했을 때 react가 다운받아지면서 앞단에 보여짐. 즉 클라이언트 단에서 렌더링이 이루어짐.
프레임워크와 라이브러리
프레임워크는 모든 도구가 빌드인 되어있는 주방이라고 생각 하면 됨
대표적인 프레임워크는 Angluar. ISO와 안드로이드도 프레임워크에 해당.
✅ 습득하는데 시간이 오래걸림
✅ 정해진 틀 안에서 정해진 규칙만 따라야 하기 때문에 자율성이 떨어짐
라이브러리는 작은 솔루션 단위로 도구 자체에 해당.
리액트는 UI를 위한 도구.
✅ 뼈대가 정해져 있지 않음
✅ 필요할 때 마다 내가 원하는 도구들을 여기저기서 가져다 쓸 수 있다는 이점이 있음
리액트 특징
🔑 keyword : State Props Render Re-render
- UI를 컴포넌트 단위(함수형 컴포넌트)로 구성
- 재사용 가능
- 유지보수에 유리
- 페이지 구성 한눈에 파악
- 컴포넌트 안에 컴포넌트가 상속되어 있는 구조, 즉 부모 자식관계로 존재하기도 함
- 가상돔 사용 : 빠르게 화면 업데이트가 이루어지는 이유
❗️좋은 컴포넌트의 조건 : 독립적이고 고립되어있고 재사용성이 높아야한다
DOM 그리고 DOM Tree
참고 : DOM 이란? DOM TREE? DOM API? - DOM 정리
함수형 컴포넌트
함수형 컴포넌트가 나오기 이전에는 class로 컴포넌트를 만들었는데, 재사용하기 어렵다는 단점이 있었다.
2019년 이후에 function, 함수형 컴포넌트와 react hook(재사용 가능한 함수)이 등장하면서 효율적인 개발이 가능해짐
Hooks의 존재 이유? 값이 아닌 로직을 재사용하기 위함
JSX 문법 특징 8가지 (암기필수_디버깅할 시간 줄어듬)
JSX = 자바스크립트 확장문법. 리액트에 쓰임
className
babel : 컴파일링 도구
- JSX element : js 파일에 html 작성할 수 있음
- html tag 안에 {js 표현식 사용 가능_변수명}
- attribute : className *html명과 다르게 사용되는 속성명들이 있음
- event 처리하기 : js에서 길게 써 놓은걸 압축할 수 있음. html 태그 안에 onlick={이벤트핸들러} 바로 부여해서 실행시킴
- 인라인 스타일링 : {{<h1 style={{ color: "red", backgroundImage: "yellow" }}>
Welcome to Wecode!}} - self closing tag : img 같이 닫는 태그 없는경우
- 반드시 태그들을 감싸고 있는 최상위 태그가 있어야함
- React.Fragment : 의미론적으로 하나로 묶여서는 안될경우, 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 축약형인 <> ... </> 문법으로도 동일하게 사용할 수 있습니다
참조
https://www.samsungsds.com/kr/insights/jquery.html
https://w3techs.com/technologies/comparison/js-jquery,js-react,js-vuejs
