react 공부하기

공부

seoyepar 2022. 3. 17. 22:28

react란, 사용자 태그 기술을 만들어 준다.

이런 기술을 component라 부름.

1. 가독성을 높일 수 있음.

2. 재사용성이 높아짐.

3. 유지보수가 편리해짐.

npm이용 -> 홈페이지 다운로드

- npm을 이용하여 create react app 설치

npm install -g create-react-app

(-g : 컴퓨터 어디서든 사용 가능)

- 버전확인

create-react-app -V

! 공식 : npx(create-react-app 설치 시 설치한 당시에만 사용할 수 있고 지워짐. 공간낭비를 안함. 항상 최신상태를 사용)

npm은 공식은 아니지만 한번 설치하면 계속 사용이 가능.

* 폴더 생성 시 react라 하면 안됨! 거절함.

* 폴더 안에서 create-react-app .을 쳐주면 개발환경 설치가 완료됨.

실행 : npm run start

종료 : ctrl + c

public - index.html

index.html을 실행하면 위의 웹 페이지를 실행한 결과가 나옴.

id가 root인 곳에 들어가는 파일들에는 react에서 만든 component들이 들어가게 되는데, src안에 component들을 넣어둠.

여기에 있는 root라는 이름 설정을 통해 소통하므로, 여기의 root의 이름을 바꾼다면 위의 root도 이름을 바꿔주면 됨.

<APP />이 react를 통해 만든 component app이다.

component의 실제 구현은 위의 import를 통해서 './App(.js생략)'파일안에 있음.

App.js파일 안의 함수에서 <div className="App>과 </div> 사이의 내용을 지우고 원하는 글자를 입력하면 해당 실행 화면이 바뀌게 됨.

index.css파일을 수정하면 디자인을 바꿀 수 있음.

ex)

boy{

background-color : 원하는색;

}

이 index.css파일에 들어있다면, 배경 색이 지정한 색으로 변경이 됨.

import App from './App'

ReactDOM.render(<App />, 어쩌고);

에서 import 바로 옆의 App과 밑에줄의 App만 이름을 갖게 해주면 어떤 이름이든 상관 없음!

만약 from 오른쪽의 App을 갖게 바꿔주면 문제가 될 수 있는데, 이 부분은 그냥 파일 이름이기 때문에 파일 이름에 맞춰서 해주면 됨! 만일 파일 이름이 바꾼 이름이랑 같다면 문제 안됨.

빌드 : npm run build

->build 디렉토리가 추가

자동으로 용량을 줄이고 불필요한 메세지를 지워줌.

그래서 배포 시에는 build안의 파일들을 사용하면 됨.

npm install -g serve : 컴퓨터 어디서나 server명령어를 통해 웹서버를 실행할 수 있음.

또는 한번 실행은 npx serve -s build. -s는 실행할 때 build를 document root로 하겠다는 명령어.

-> 주소를 알려주고 그 주소로 들어가면 뜨는데, 용량이 확 줄어든 페이지가 뜨는 것을 볼 수 있음.

정리 예쁘게 바꾸는건 나중에,,,ㅎㅎ~