[React JS] 리액트 기본 학습 메모

1. Node, npm, npx, git 설치

1.node.js 설치(홈페이지에서. 설치확인 : node -v / npm 설치확인 : npm -v)
2. 콘솔에서 npm install npx -g (설치확인: npx -v)
3. VSC 설치(다른 코드 에디터 써도 됨)
4. git 설치(설치 확인:콘솔에서 git --version)

 

 

리액트 컴파일 create-react-app

리액트의 코드는 브라우저가 이해할 수 없기 때문에, 이것을 셋업하기 위해 Web pack과 Babel을 다운로드 해야하고, 컴파일을 하는 그런 복잡하고 귀찮은 작업이 필요했다. 그런데, 이제는 create-react-app이라는 걸 통해서, 하나의 명령으로 React Web app을 Set up하게 되었다. 

 

1. node js npm, npx 설치가 되어있어야 한다. 

2. Documents > npx create-react-app 만들고자 하는 폴더이름

 

3. Vs code에서 해당 폴더를 오픈

1) readme를 내 취향껏 수정

2) package.json ->scripts에서 start, build만 남긴다.

불필요한 컴마가 뒤에 남지 않게 잘 지운다. - syntax 에러가 생길 수 있음

3) npm이나 yarn 이나 동일 => npm start로 실행함

 

index.html, index.js, App.js

이 세가지가 핵심 구성 축이다. 

1. index.html

• <div> id를 지정해주고, index.js에서 해당 div 내부의 내용을 표시한다.

2. index.js

3. App.js

• index.js의 ReactDom.render에서  <App />는 바로 App.js를 의미하는 것. 
• App.js => 컴포넌트
• Component = html을 반환하는 함수
• html형태로 작성하는 js = jsx, 리액트에서 유일한 표현방식

• 리액트는 index.js에서 하나의 컴포넌트만 render해줄 수 있기 때문에, 새로운 Component는 index.js가 아닌, Component안에 써주기
• Component는 대문자로 쓰기
• Props 개념 = Component 안에 넣을 수 있는 요소

App.js안에 여러개의 Argument를 생성하고, Props를 이용해서 데이터 주고받기

• map : function을 취해서, 해당 함수를 array의 각 item에 적용한다. 

React의 Element는 모두 고유해야 한다. 

• list에 id를 추가해준다.
• 웹페이지의 console창에 오류가 사라질 것

 

PropTypes

npm i prop-types

PropTypes를 이용해, console에서 prop 전달에 이상이 없는지 확인가능

 

동적 데이터를 다루는 State

• state를 쓰기 위해서는, class component 형태를 사용해줘야햔다. (앞서서 했던 것은 function component. class component와 function component에는 차이가 있다.)
• function component는 무언가를 return해서 screen에 표시한다. 
• class component는 React.component로부터 확장되고 screen에 표시하기 위해서 'render()' 안에 넣어줘야 한다. render method안에 넣어야만 한다. 
• 그러면 리액트가 알아서 자동으로, class component의 render method를 실행한다.

• state는 object이고, 동적인 데이터를 state 안에 써준다. 그리고 render method에서 호출을 해준다. 

• setState({}) : state를 바꾸고 싶다면, setState를 사용한다. 새로운 데이터를 알아서 refresh하고, render function을 refresh해 표시해준다. 

 

• current 써서, 더 쿨하게 코드짜기

 

React Lifecycle Method

• refresh => Component의 render 호출 -> componentDidMount 
• setState 호출 => render -> 업데이트가 되면, ComponentDidUpdate가 작동할 것

 

Axios

npm i axios