리액트(React)
- 단순히 정적 페이지를 만든다면 HTML, CSS를 사용하여 제작
- Javascript를 추가하면 동적인 화면을 구성
- SPA(Single Page Application)을 구성하기 위한 프레임워크
- DOM 솬리와 상태값 업데이트 관리를 최소화하고 기능 개발, 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 함
- Angular, Vue
리액트(React)의 특징
- "컴퍼넌트" 라는 개념에 집중이 되어있음
- 사용자에게 전달되는 VIEW에만 집중하고 그 외 기능은 third party 라이브러리에 의존
- virtual DOM: 변화가 일어나면 실제 브라우저의 DOM에 바로 변화를 주는 것이 아닌, 지바스크립트로
이루어진 가상 DOM에 렌더링을 하고 실제 브라우저 DOM과 비교를 한 다음 꼭 변화가 필요한 곳에만
업데이트 해주는 방식
-JSX(Javascript XML): React에서 사용하는 확장 문법. HTML과 유사한 문법을 사용하여 UI를
정의하지만 실제로 Javascript 코드로 변환
-React 만들기
https://create-react-app.dev/docs/getting-started/
react test 파일 생성
1. npx create-react-app test
-->text폴더로 react 프로젝트를 만든다
2. src에 index.js 파일로 처음 시작한다.
app.js와 Profile.jsx 를 작업하면 된다.
3. <></> 는 <div>{name}</div> 와 같음
app.js 실행후 counter.js 실행
useState
- 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 React Hook
- 상태는 컴포넌트의 데이터가 변할때 UI를 업데이트하는데 사용
- USESTATE는 상태 변수와 상태를 업데이트하는 함수를 제공하여
상태 관리를 편하게 만들어줌