작심 365
[노마드 코더] React강의 정리 본문
노마드 코더의 'ReactJS 로 영화 웹 서비스 만들기' 강의를 들으며 간단히 정리하는 곳이지만
react를 처음 배울때 공부하는 기본적인 내용들이다.
초기 세팅
react 개발을 할때는 개발을 할수있도록 환경을 만들어줘야 한다. 그런데 그 방법이 간단하지는 않다.
이런 환경을 한번의 명령어로 세팅해줄수 있는데, 그 명령이 바로 npx create-react-app project_name 이다.
이 강의에서도 그렇고 대부분의 처음 react를 접하는 사람들이 이 명령어로 react 개발환경을 구축한다.
(여기서는 vs code를 사용한다. )
컴퓨터 사양에 따라 시간이 걸릴수 있는데 기다리다보면 언젠가는 된다.
마지막에 Happy hacking! 이라는 글이 나왔다면 성공적으로 설치가 된것이다.
다 만들었으면 vs code로 만든 폴더를 열고 react를 실행시켜본다. react 실행 명령은 터미널에
npm run start / npm start 둘중 아무거나 치면 브라우저에 창이 뜨면서 실행이 된다.
*jsx (보충)
jsx는 javascript 안의 html이자 component를 만들고 어떻게 사용해야 하는지에 대한것 이라고한다.
jsx는 javascript 확장 문법으로 xml,html과 비슷하게 생겼다. 때문에 좀더 친숙하고 쉽게 사용할수 있다는 점이 장점이다. component를 사용하는 방법도 html에서 태그 사용과 비슷하다.
react는 component들로 구성되어있다. component는 HTML을 반환하는 함수이다.
그래서 App이라는 function이 html을 반환하는것을 볼수 있다.
이 App 이라는 component를 index.js 에서 ReactDom.render로 가져와서 화면에 그려주고있다.
*ReactDOM.render (보충)
component를 페이지에 렌더링하는 역할을 하고, react-dom 모듈을 불러와야 사용할수 있다.
이 함수는 첫번째 인자에는 렌더링할 내용을 jsx 문법으로 작성하고, 두번째 인자에는 해당 jsx를
렌더링할 document 내부 요소를 설정한다. 여기서 참조하는 id가 root인 element는 index.html 파일에 있다.
강의에는 <React.StrictMode>가 없는데 이건 버전이 달라서 그렇다.
*React.StrictMode (보충)
리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능이다.
즉, 잠재적 문제들에 대해 경고를 해준다.
또 개발 모드에서만 활성화 되기때문에 프로덕션 빌드에는 영향을 끼치지 않는다고한다.
component 만들기
src 폴더에 Potato 라는 이름의 js 파일 생성한다.
모든 component 는 작성할때마다 맨 위에 import React from 'react' 를 써줘야 한다.
이걸 쓰지 않으면 jsx가 component 를 이해하지 못한다고 한다.
파일명이 Potato 이므로 함수 명도 Potato 라고 한다.함수를 작성하고 return 안에는 보여주고싶은 내용을 적는다. 마지막으로 항상 맨 밑에 파일을 export 해줘야 다른파일에서 이 파일을 사용할수 있다.
방금 만든 Potato라는 component를 사용하기 위해서는 사용할 파일에서 Potato 를 불러와야하는데,
import 문을 통해 불러올수 있다. -> import Potato from './Potato';
개발자도구로 확인해보면 그냥 평범한 html이다. react는 component를 가져와서 브라우저가 이해할수 있는 평범한
html로 만든것이다.
아래 이미지처럼 component 안에 component 만들고 사용도 가능하다.
react는 component를 얼마든지 재사용할수 있다는 멋진 특징을 가지고있다.
재사용성의 이점을 사용하기위해서는 props라는것을 알아야한다.
props 사용하기
props는 properties의 줄임말로 component의 속성을 설정할때 사용한다.
props값은 해당 component를 불러와서 사용하는 부모 component에서 설정할수 있다.
아래 예제에서는 App컴포넌트(부모)에서 Food 컴포넌트에 fav라는 속성을 주고 "kimchi" 라는 값을 줬다.
이걸 props라고 하고 이렇게 넘오는 값을 Food 컴포넌트 안에서 직접 사용할수가 있다.
아래처럼 Food 컴포넌트를 얼마든지 재사용할수가 있다.
props에 비구조화 할당 문법 사용
props값을 사용할때마다 props.name, props.fav , props.xxx 이런식으로 사용하는게
번거로울수 있다. 이때 우리는 비구조화 할당 이라는것을 사용해 좀더 쉽게 사용할수 있다.
비구조화 할당은 객체나 배열을 변수로 분해 할수 있게 해준다.
//비구조화 할당 사용 예시
let arr = ["Kim", "eunKyung"]
let [firstName, secondName] = arr ;
console.log(firstName); // Kim
console.log(secondName); // eunKyung위와 같이 props에도 비구조화 할당 문법을 적용하면
이런식으로 사용할수 있다.
그리고 함수 파라미터에 사용하고 싶은 props를 { xxx, xxx, xxx } 이런식으로 직접 넣어서 사용할수도 있다.
즉 함수 파라미터가 객체라면 바로 비구조화를 해서 사용하는 것이다.
prop.types
component를 통해 보내는 여러 props들중 해당 props의 타입이 제대로 넘어갔는지, 꼭 필요한
props가 제대로 들어있는지 등을 검증해줄때 사용할수 있다.
npm i prop.types 명령어를 통해 설치할 수 있다.
package.json 파일에 dependencies 부분에서 제대로 설치가 됬는지 확인이 가능하다.
마찬가지로 사용하기 위해서는 import로 가져와야한다. -> import PropTypes from 'prop-types';
image 의 타입을 number라고 지정을 하고 실제로는 string 값을 넘겼을때
브라우저에서 개발자도구의 console 탭을 보면 경고가 뜬다.
isRequired로 설정한 props의 경우는 반드시 써줘야 한다 그렇지 않으면 마찬가지로 경고가 뜬다.
class component
함수 컴포넌트의 경우는 함수가 화면에 그릴 내용을 return 하는것이고,
클래스 컴포넌트의 경우는 return을 할수가 없다. 그래서 React.Component를 확장하므로써
render 함수를 사용할수 있고 그안에 화면에 그릴 내용을 return 할수 있다.
react는 자동으로 클래스 컴포넌트의 render 함수를 실행한다.
더 간단한 함수 컴포넌트를 쓰지 않고 클래스 컴포넌트를 사용하는 이유는 state 기능을 사용하기 위해서이다.
state는 object이고 컴포넌트의 data를 넣을 공간이 있으며 이 data는 변한다.
state 사용 예시
하다보니 함수 컴포넌트와 다른점은 자바스크립트를 호출할때 클래스 내부이므로 this. 을 한다는것..
그리고 onClick={this.add} 이부분에서 함수를 호출한다고 this.add() 라고 하면 클릭을 하지 않아도 실행이 한번 된다.
클릭할때만 실행하게 하려면 this.add 라고 써줘야한다.
react는 render 함수를 refresh 해주지 않기때문에 state 변수 값을 변경하려면 setState() 를 사용해야 한다.
state는 object 이므로 setState는 새로운 state를 받아야 하고 떄문에 객체 형태로 줘야한다.
하지만 위 코드에서 setState 부분은 그렇게 좋은 코드는 아니다. state 값에 의존하고 있기때문
이부분을 this.setState(current => ({ count: current.count + 1 })); 로 바꾸면 더 좋은 코드가 된다.
여기서 가장 중요한 내용은 setState를 호출할때마다 react는 새로운 state 와 함께 render 함수를 호출한다는 것이다.
life cycle method
리액트 클래스 컴포넌트는 render 말고 life cycle method도 가진다. 이 메서드는 component의 생명주기에 관여한다
강의에서 사용된 componentDidMount 함수는 render 함수가 실행된 후에 실행된다. 여기서는 주로 data를 fecth 한다.
영화 목록 나타내기
이 강의에서는 yts 에서 제공하는 api를 사용해서 영화를 불러왔다. 정렬은 평점순으로
보면 api를 통해 목록을 불러들이는데 시간이 걸리기 때문에 async, await을 사용했다.
이 예제에서는 값이 계속 바뀌는 변수는 없기때문에 state는 사용하지 않고, props를 사용했다.
api를 통해 가져온 영화 데이터는 json 형식으로 되어있다.
이중에 필요한 데이터만 추리기 위해서 movie 배열에 map함수를 적용해서 각각 props 값을 넘겼다.
Movie 컴포넌트는 넘어온 값을 받아서 화면에 뿌리고 propTypes를 추가해 props 의 내용을 검증했다.
데이터를 잘 갖고와서 화면에 잘 나온다.
'Front-End > React' 카테고리의 다른 글
| propTypes 사용시 오류 (0) | 2021.08.22 |
|---|
