# Why React?

html / css / javascript / DOM / Event ... -> jQuery ( 순수 javascript 보다 속도 느리며 유지보수가 어려움 ) ===> React

# What React?

javascript 라이브러리

📌 라이브러리 - 개발자가 필요한 부분을 뽑아서 자유롭게 사용가능
📌 프레임워크 - 뼈대 기반의 특정한 디자인 패턴이 있으며, 사용이 편하나 프레임워크에 종속되어진 형태

사용량이 많아 생태계가 잘 구성되어있으며, 검색시 정보의 밭!
개발자의 필요한 라이브러리로 잘 구축되어 사용가능

# What is React?!

사용자 인터페이스를 만들기 위한 javascript 라이브러리

📌 가상돔을 통해 UI를 빠르게 업데이트 가능하다.
(setstate를 통하여 값이 변경될경우 가상돔이 랜더링시 바뀐 값만 다시 랜더링함)
📌 컴퍼넌트 - 재사용이 가능한 UI, 페이징 최소화 - 유지보수에 효율성 높다.

# node.js

웹 브라우저가 이해하는 언어 javascript. 각 브라우저마다 해석해주는 검색 엔진이 있어, 서버에 바로 접근하기 위해 javascript언어로 접근 가능하게 해주는 환경.

# npm

node 환경에서 패키징을 관리해주는 도구

# CRA ( Create-React-App )

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구( toolchain )
리액트는 UI 기능만을 제공하며, 개발자가 직접 구축하는 것들이 많다.
( 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려운점이 있다. )

# 컴퍼넌트 VS 페이지 (ex, Aesop site)

📌 컴퍼넌트 - mainPage의 nav, footer등, 반복되는 모든 페이지에 동일하게 등장하는 부분을 컴퍼넌트로 분류하여 관리하는 유지보수 효율성
📌 페이지 - 프로덕트 리스트 페이지, 프로덕트 카드 페이지 등....

컴퍼넌트는 재활용 가능한 UI 구성 단위로 Westagram의 aritcle 레이아웃부분이 feeds안에 반복되는 과정으로 컴퍼넌트로 분류 가능하다.

*위스타그램 클래스형태로 진행후 function형태로 진행