참고로 윈도우에서 npm init react-app 을 실행시키려면 최신버전이었던 22.00.0 버전은 안된다.
에러만 잔뜩나고 이거 해결하려고 별짓을 다해봤는데 결론은 다운그레이드 하면 되는 거였다.
20.00.0설치하라고 해주신 블로거님 짱짱🥺
- 웹사이트에 기능들이 많아지면 코드가 점점 늘어나게 된다.
그럼 사이트 유지보수가 매우 어려워 지기 때문에 페이스북이 리액트를 만들게 되었다.
즉 효율적인 코드로 UI를 관리하고 동적인 데이터를 적절한 곳 UI에 뿌려주기 좋다.
-react native 리액트로 앱을 만드는 기술. 자바스크립트 언어 하나가지고 IOS, 안드로이드 모두 가능한 앱을 만들수 있다. (크로스플랫폼)
- 크로스플랫폼 : 리액트 네이티브, 플러터(다크 언어 사용), 버블, 웹플로우 등
원하는 기능을 만들으려면 코드가 필요하다.
설치
node
npm init react-app react-start
(react-start)는 폴더이름임
JSX문법 : 자바스크립트와 HTML 문서가 섞여있는 문서
예를들어 class 는 className 으로 넣는다.
- npm run start
내 컴퓨터를 서버 컴퓨터로 만들겠다 라고 하는 명령어
그럼 http://localhost:3000/ 주소의 창이 뜨는데
localhost 는 내 컴퓨터에 접속하겠다고 하는 url
port번호는 같은 url 즉 사서함 번호 같은 느낌
Local: http://localhost:3000
On Your Network: http://172.31.176.1:3000
같은 와이파이를 쓰고있는 컴퓨터도 같이 볼수있다.
사용
이런걸 컴포넌트라고 한다.
컴포넌트란? UI의 조각. 버튼들 메뉴들, 요소
컴포넌트들을 만들고 이것을 조합해서 하나의 사이트로 완성한다.
-리액트에서 컴포넌트의 특징
1. 함수다. (옛날엔 class컴포넌트를 사용했다. 지금은 함수형 컴포넌트를 사용함.)
함수형 컴포넌트 : 함수로 만든 컴포넌트
클래스 컴포넌트 : 클래스로 만든 컴포넌트
2. JXS를 리턴한다. html 또는 다른 컴포넌트를 반환.
3. 대문자로 시작해야 한다.
4. JSX문법내에서도 자바스크립트를 쓸 수 있다. {}를 사용하면 된다.
하나의 html에는 하나의 컴포넌트
State
리액트가 랜더링하는 방식
-
코드를 해석해서 화면에 그려주는 것이 랜더링
state값이 바뀌면 컴포넌트 함수를 다시 실행한다.-> 다시 랜더링한다. -
배열이나 객체는 주소값을 바꿔야 다시랜더링 한다.
-
props값도 바뀌면 컴포넌트를 다시 랜더링
state 또는 props값이 바뀌면 랜더링바뀌는 부분 때문에 다시 랜더링하는 건 이해를 하는더, 컴포넌트가 아주 큰데 바뀌는 부분은 아주 조금일때 뭔가 비효율적이다. 리액트는 이걸 알아서 해준다. 바뀌지 않는 부분은 그대로 둔다.
html Dom
컴퓨터파워 효율적으로 쓰기 위해서 리액트가 버츄얼 돔을 사용한다.https://vercel.com/
배포 사이트(깃과 연결)
ㄴ코드 바꾸고 커밋후에 푸쉬만 하면 바로 반영된다.
