Javascript도 잘 못하는 내가... ReactJS를 해야 할 때가 왔다.
예전에 인프런에서 ReactJs 강좌 동영상을 본 적이 있었는데..
너무 어려워서 한 번 듣고 따라해보고.. 포기했었다.
근데 이번에 정.....말 필요해져서 다시 들어볼까하고 인프런에서 강좌 찾고 있었는데,
니꼴라스(노마드코더) 동영상이 있는 것을 보았고 간혹 소셜에서 접했었던 사람이라 궁금해서 시청하기 시작했다.
주제도 어려워 보이지 않았고
처음에는 그냥 듣기만 했고, 다 보고 나서 따라 코딩했는데 정말 쉽고 좋았다.
돌 머리인 내가 어느정도 이해가 갔다면 확실히 니꼴라스가 잘 가르쳐준것 같다 + 자막도 최고
create-react-app을 install 받아서 npm start
ReactDOM.render(<app>, document.getElementById('root'));
+ 코드 플러그인 내부에 넣으니까 자꾸 <app>을 닫아주는 태그를 생성한다.....
자바스크립트 내부에 HTML을 넣기 위해 사용된다.
JSX는 작성한 그대로 적용되는게 아니라 트랜스파일러를 통해 변환된다고 한다.
// <movie> {} className render() return() 같은 것들일까?
<div className={movies ? "App" : "App-loading"}>
{movies ? this._renderMovies() : 'loading...'}
</div>
render
remove
update
각각 다른 LifeCycle을 가진다.
-render
componentWillMount() > render() > componentDidMount()
render 전 > render > render 후
대충 활용 예시를 보면 api 호출, loading 애니메이션 등의 작업 > render > loading 애니메이션 제거
-remove
props, state 삭제 시에 한번만 사용된다.
componentWillUnmount()
-update
props, state가 업데이트 되면 실행된다.
componentWillReceiveProps() > shouldComponentUpdata() > componentWillUpdate() > render() > componentDidIpdate()
props를 새로 받았을 때 > 과거 state, props와 비교하여 다르다면 true 반환 > true일때 upadte 실행 > render > render 후
state가 update되면 componentWillReceiveProps() 단계는 건너 뛰고 shouldComponentUpdata()부터 실행된다.
상황에 따라 변경되어야 하는 값은 state를 이용해야한다.
state는 초기에 작성할 수도 있다.
props = 컴포넌트 내부에서 변경 불가능
https://reactjs.org/docs/hello-world.html
예전에 인프런에서 ReactJs 강좌 동영상을 본 적이 있었는데..
너무 어려워서 한 번 듣고 따라해보고.. 포기했었다.
근데 이번에 정.....말 필요해져서 다시 들어볼까하고 인프런에서 강좌 찾고 있었는데,
니꼴라스(노마드코더) 동영상이 있는 것을 보았고 간혹 소셜에서 접했었던 사람이라 궁금해서 시청하기 시작했다.
주제도 어려워 보이지 않았고
처음에는 그냥 듣기만 했고, 다 보고 나서 따라 코딩했는데 정말 쉽고 좋았다.
돌 머리인 내가 어느정도 이해가 갔다면 확실히 니꼴라스가 잘 가르쳐준것 같다 + 자막도 최고
하지만 다들 알아야한다 v16.3 업데이트 전 내용이라 참고하고 다른 학습도 해야한다.
영상 주소
https://www.inflearn.com/course/reactjs-web/
ReactJS로 웹 서비스 만들기 학습 정리
※ 예제로 나오는 코드는 니꼴라스가 작성한 코드다.create-react-app을 install 받아서 npm start
1. import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//'react' 모듈에서 React 정의된 객체, 함수, 속성 등을 import 하겠다는 구문.
// ReactDOM = 웹서비스, ReactNative = 모바일이라고 하더라.
// 컴포넌트 최상단에 위치한다.
// {Component}는 React.Component 클래스 속성을 import 하겠다는 것 같은데?
import React, { Component } from 'react';
// ReactDOM.render 를 이용해서 app 컴포넌트를 엘리먼트 #root에 render시킨다.ReactDOM.render(<app>, document.getElementById('root'));
+ 코드 플러그인 내부에 넣으니까 자꾸 <app>을 닫아주는 태그를 생성한다.....
2. JSX 문법을 쓴다.
Javascript + XML의 합성어자바스크립트 내부에 HTML을 넣기 위해 사용된다.
JSX는 작성한 그대로 적용되는게 아니라 트랜스파일러를 통해 변환된다고 한다.
// <movie> {} className render() return() 같은 것들일까?
<div className={movies ? "App" : "App-loading"}>
{movies ? this._renderMovies() : 'loading...'}
</div>
3. class app extends React.Component
app은 컴포넌트 함수명임. 변경가능. // React.Component 클래스 속성을 상속해서 컴포넌트를 생성하는 방식
// class 컴포넌트는 state가 존재하는 function이어서 state function이라고 한다.
class App extends Component {
..........
}
// state가 존재하지 않는 function은 stateless function이라고 하며 기존의 자바스크립트 function을 말한다.
// stateless function은 props만 있으며 return하기 위해 사용한다고 한다.
function Movie({title, poster, genres, synopsis}){
return(
..............
)
}
사용 이유에 따라 두 가지를 적절히 나누어 사용하라고 한다.4. LifeCycle
v16.3으로 버전 업데이트가 되면서 니꼴라스 강의에서 나온 lifeCycle이 달라졌음을 알게되었다.
componentWillMount()
componentWillUpdate()
componentWillReceiveProps()
세가지가 없어졌다.
- 기존에 사용하던 것들을 대체하기 위해 메서드 앞에 prefix로 UNSAFE_를 붙이면 사용할 수 있다.
- UNSAFE_componentWillMount()
componentWillMount()
여기서 하던 작업은
constructor(), componentDidMount를 사용한다고 한다.
componentWillUpdate()
여기서 하던 작업은
getSnapshotBeforeUpdate()를 사용한다고 한다.
getSnapshotBeforeUpdate(prevProps, prevState){
if(prevState.value !== this.state.value){
return ........ ;
}
}
componentWillReceiveProps()
여기서 하던 작업은
static getDerivedStateFromProps()로 대체 한다고 한다.
사용방법은 이런 식이라고 한다.
static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.value !== prevState.value){
// value값이 다를 경우, return
return ........... ;
}
}
솔직히 바뀐건 아직 확실히 잘 모르겠다.
더 공부해야지..
-render
-remove
-update
5. props와 state 속성
props는 컴포넌트 mounting, updating 프로세스 시점에 값이 할당될 뿐, 내부에서 값을 변경할 수 없다.상황에 따라 변경되어야 하는 값은 state를 이용해야한다.
state는 초기에 작성할 수도 있다.
_getMovies = async () => {
const movies = await this._callApi()
// state는 직접적으로 변경해서 사용하면 안된다. (this.state.name = '스어'; 콘솔에러..)
// this.state.movies = movies; (x)
// setState() API를 통해 추가하거나 업데이트 해야 한다.
this.setState({
movies
})
}
state = 컴포넌트 내부에서 변경 가능props = 컴포넌트 내부에서 변경 불가능
6. propTypes는 props type을 체크하여 validation해준다.
// 사용하기 위해서는 propTypes 모듈을 install한 다음 import하여 사용해야 한다.
import PropTypes from 'prop-types';
function MoviePoster({poster,alt}){
return(
)
}
// props을 사용하는 .js 내부에 사용한다.
MoviePoster.propTypes = {
poster: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired
}
7. Ajax
// async는 비동기 형식으로 실행된다.
_getMovies = async () => {
// await은 함수가 종료되고 나서 진행한다는 의미, api 호출이 종료 되면 movies에 할당하고 다음 라인 실행
const movies = await this._callApi()
// this.state.movies = movies; (x)
this.setState({
movies
})
}
_callApi = () => {
// fetch에서 api를 호출
return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
.then(response => response.json()) // 데이터를 json 형식으로 변환
.then(json => json.data.movies) // movies 데이터 return
.catch(err => console.log(err))
}
8. export
app은 컴포넌트 함수명임. 변경가능.// 다중 export export app1, app2, app3...; // *(asterisk / 별표) 는 파일 내 정의된 모든 객체, 함수, 속성 export export *; // default : 모듈의 기본 값, 파일 내 한 번만 호출 가능 export default App;ReactJS
https://reactjs.org/docs/hello-world.html
'~2022 > FE-React' 카테고리의 다른 글
| React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
|---|---|
| React 기초 학습 7.자식 컴포넌트로 props 전달 / 주석 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 6.반복문에서 key (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기) (0) | 2020.04.21 |
| React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 3. 필요한 파일들에 대해 알아보자(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.18 |
| React 기초 학습 1. HTML에서 React를 사용해보자.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.10 |
