[React] 리액트란 무엇인가?

🤔 React 란?

• 자바스크립트 라이브러리의 하나, 웹 프레임워크
• 사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발
• 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 기능
• 2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용.
• 2013년 발표, 오픈소스화 됨

 

• Component (컴포넌트): UI를 이루는 최소 단위입니다. 마치 레고 블록처럼 화면의 각 부분을 독립된 부품으로 만들고, 이를 조립해 큰 웹사이트를 완성합니다.
• Virtual DOM (가상 DOM): 성능의 비결입니다. 화면에 변화가 생길 때마다 전체 페이지를 다시 그리는 대신, 가상의 복사본에서 바뀐 부분만 계산해 실제 화면에 반영합니다. 매우 빠르고 효율적이죠.
• Declarative (선언적 프로그래밍): "어떻게 화면을 바꿀지" 일일이 명령하지 않고, "결과물이 어떻게 보여야 할지" 정의합니다. 코드가 훨씬 간결해지고 예측하기 쉬워져요.

---

리액트의 동작 원리

1. 초기 랜더링
2. 가상 DOM 변경
   • 수정할 떄, 리액트는 실제 화면을 바로 건드리지 않고, 대신 메모리 속에 있는 가상 DOM을 하나 만듭니다. 
3. 재조정
   • 이전의 가상 DOM과 방금 새로 만든 가상 DOM을 나란히 놓고 비교합니다.
4. 실제 DOM 업데이트
   • 그렇게 바뀐 부분만 실제 화면에 반영합니다.

 

사용장점

특징	설명
재사용성	한 번 만든 버튼이나 네비게이션 바를 여기저기서 다시 쓸 수 있습니다.
생태계	전 세계 개발자들이 만든 도구(라이브러리)가 엄청나게 많아 문제 해결이 쉽습니다.
단방향 데이터 흐름	데이터가 위에서 아래로만 흘러가기 때문에 데이터 추적이 쉽고 버그가 줄어듭니다.
유연성	리액트 지식을 활용해 'React Native'로 모바일 앱까지 만들 수 있습니다.

 

---

리액트 시작하기 

https://react.dev/learn/creating-a-react-app

Creating a React App – React

create-react-app my-app

 

my-app 이라는 이름으로 리액트 폴더 생성(기본 js)

 

create-react-app my-app --template typescript

typescript로 생성

 

npm start

실행