알토르 멘토링 4주차 과제.
1. 컴포넌트란 무엇인가?
컴포넌트란 다시 사용할 수 있는 코드 블록을 말한다.
크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘며, 함수형 컴포넌트가 더 자주 쓰인다.
import React from 'react';
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
export default Greeting;
위의 코드에서, Greeting이라는 함수를 만들었다.
인사를 위한 서식은 이 함수로 만들어졌으므로, 다른 컴포넌트에서는 이 인사를 하는 대상이 누구인지만 지정하면 된다.
2. API란 무엇인가?
이번 4주차에서 사용한 API는 웹 서비스 연동의 기능을 갖는다.
Tmdb 사이트에의 영화 목록을 제공하는 API를 이용하여, 클론 넷플릭스의 front site 일부를 만들 수 있었다.
이 때, 특정한 주소로부터 데이터(나의 경우에는 영화 목록)을 가져오기 위해 GET 메소드를 사용하였다.
3. Axios를 이용한 api 요청 구현 + Axios 모듈 VS Fetch 기능.
3-1. 2번 항목에서 영화 목록을 제공하는 API를 가져오기 위해 사용한 모듈이 axios이다.
Axios와 Fetch는 소 잡는 칼과 닭 잡는 칼의 관계와 같다.
Fetch의 모든 기능을 Axios가 다 실행할 수 있으나, Fetch는 JS의 기본 기능이기에 설치가 필요하지 않다.
별도의 설치가 필요하지만 다양한 기능과 높은 성능을 가진 도구(=Axios)와,
가볍고 편하게 쓸 수 있는 대신 기능이 한정된 도구(=Fetch) 사이의 관계로 이해할 수 있다.
3-2. 비동기 처리의 promise에 대하여.
promise란, 비동기 작업을 다루기 위해 사용되는 객체이다.
promise를 반환한다는 것은 다음과 같다.
1) 비동기 작업이 시작되는 그 순간에 Promise가 생성된다. 그 후, 작업이 끝날 때까지 기다린다.
2) 작업이 완료되면, 성공 여부에 따라 각기 다른 함수가 호출된다.
3) 호출된 함수에 의해 다음 과정의 일처리로 넘어간다.
4) 하나의 일처리가 완료되면, Promise는 폐기된다.
일상 이해: 은행 대기 번호표를 생각해 보자.
대기 번호표를 뽑는다 = 황대영이라는 객체가 은행에 업무를 보러 왔다는 선언.
내 차례에 대기 번호표를 창구로 제출한다 = 내 차례가 맞다는 선언
번호표의 폐기 = 증명이 끝난 번호표를 폐기.
4. useState, useEffect
4-1. useState란?
state = 컴포넌트의 상태.
usestate는 이 state의 조작을 가능하게 한다.
const [state, setState] = usestate()
배열의 전자는 기본값이며, 후자는 새로 설정할 값이다.
setstate를 설정할 경우, 업데이트/렌더링이 일어나게 된다.
setstate를 사용하는 별도의 함수를 만들어 줄 필요가 있다.
4-2. useEffect란?
mount = 화면의 최초 렌더링.
update = 최초 이후의 렌더링/업데이트.
unmount = 화면에서 사라지는 경우.
이럴 때마다 특정한 작업을 실행시켜 주고 싶다면 useEffect를 사용한다.
콜백 함수만 인자로 받는 경우 or 1번 인자로 콜백 함수, 2번 인자로 배열을 받는 경우.
전자는 렌더링되는 모든 경우에 실행.
그러다 보니, 아무리 사소한 변화라도 전부 반응하기 때문에 작업이 복잡해지면 속도가 느려진다.
후자는 최초 렌더링 + 배열 안 요소의 값이 바뀔 때만 실행.
최초 렌더링 시에만 작업을 시키고 싶다면 배열을 비울 것.
5. 리액트 컴포넌트들이 (재)렌더링되는 시점은?
최초 화면에 표시될 때 컴포넌트 최초 렌더링.
부모 컴포넌트가 렌더링되면 자식 컴포넌트도 렌더링.
setState를 사용하여, 자신의 state가 새롭게 변경되었을 때.
자신에게 전달받은 props가 변경됐을 때(?) => 전달받은 값이 변경되었을 경우?
최초 렌더링을 제외하고, 재렌더링되는 경우는 크게 3가지.