React..?
- Component 기반의 UI 라이브러리
- Node 기반의 Javascript UI 라이브러리
Why React?
- 재사용되어야하는 요소들을 컴포넌트화 방식으로 코딩이 가능하다.
따라서 수정사항이 생겼을 때(한개의 문제가 수많은 파일들을 수정해야하는 경우)
수정하기 쉬움(컴포넌트가 정의된 파일만 수정하면 된다.) 따라서 유지보수하기가 쉬워진다.
즉 중복 코드 발생(shoutgun surgery)시, 타이핑해야하는 코드의 수가 줄어든다.
-
선언형 프로그래밍으로서, 간결하고 짧은 코드로 프로그래밍이 가능하다.
(명령형 프로그래밍 - jQuery, 선언형 프로그래밍 - React)
-
virtual dom을 사용함으로서 과다연산을 해결할 수 있다.
DOM(Document Object Model)
문서객체모델, 웹브라우저가 HTML을 해석해서 편한대로 해석할 수 있게 트리형태로 변환 시켜 놓은 객체
잦은 업데이트를 하면 브라우저가 필요이상의 연산을 하게되고 이럴때는 성능저하가 발생한다.
따라서 실제 돔을 업데이트하는게 아니라 가상의 돔을 미리 업데이트시켜본다음(렌더링하지않음) 한번에 리얼돔에 업데이트하는 방식으로 과다연산을 해결 할 수 있다.
리액트를 위해 필요한 패키지를 일일이 다 설치하느것은 너무 힘들다
따라서
이미 세팅완료된 패키지인 Boiler Plate를 사용한다. - Create React App
npx : 설치되어있지않은 패키지를 딱 한번만 쓰고싶을 때 사용
"리액트를 실행하면 내 pc가 웹서버가 되었다고 생각하면 좋다"
State(상태)
- 계속해서 동적으로 변하는 특정 상태, 즉 상태에 따라 각각 다른 동작을 한다.
-본인이 관리하고 갖고있는 state가 바뀔때, 리랜더링
-나에게 내려오는 props가 바뀔때 마다 리랜더링 - 둘다 아니더라도 내 부모가 리랜더되면 나도 리랜더링
예시코드
Props(컴포넌트에 데이터를 전달하는 방법)
성장하는 개발자