오늘부터 리액트 심화 수업을 듣는다. 이전 리액트 기본 수업에서는 리액트 환경설치, 컴포넌트에 대한 이해, 이벤트 처리, 라우터를 이용해 데이터를 관리하는 방법, 리덕스, firebase를 활용한 데이터 관리를 배워 기본적인 기능을 만드는 것을 배웠다.
오늘부터 진행되는 심화 수업에서는 이러한 지식을 활용하여 보다 효율적이고, 사용자 편의적이게 잘 만드는 방법에 집중한다.
📌오늘 배운 것
오늘은 리액트 심화 수업 1째날로, 필요한 JS 문법과, 포스트 목록, 로그인 그리고 회원가입 페이지 뷰를 만들고 연결하였다.
자바스크립트 문법
Object
const로 선언된 상수는 재할당이 안되지만,const로 선언된 객체는 재할당이 가능하다. const로 선언된 객체는 객체에 대한 참조를 변경하지 못함을 의미하기 때문이다.
그래서 스프레드 문법 ({...어떤 것}) 등을 이용해서 수정되지 않게 주의해서 코드를 작성해야한다.
prototype
자바스크립트의 모든 객체는 자신의 부모 객체의 프로토타입과 연결되어 있어 부모객치의 것들을 상속받아 쓸 수 있다. 이런 부모객체를 프로토타입이라고 부르며, 부모객체를 참조하는 걸 프로토타입 링크라 부른다.
Promise
프로미스는 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.
const promise = new Promise((resolve, reject) => {
if(...){
...
resolve("성공!");
}else{
...
reject("실패!");
}
});
인자로 (resolve, reject) =>{} excutor 실행자를 받으며, 이 실행자는 비동기 작업이 끝난 후 resolve(작업 성공시), reject(작업 실패시) 두가지 콜백중 하나를 실행한다.
프라미스의 상태값은 pending(비동기 수행전), fullfilled(수행 성공), reject(수행 실패), settled(성공 or 실패) 이 있다.
프로미스 체이닝을 통해 후속 처리 메서드 (then)을 쭉 이어줄 수 있다.
Async,Awiat
// async는 function 앞에 써준다.
async function myFunc() {
return "프라미스를 반환해요!"; // 프라미스가 아닌 걸 반환해볼게요!
}
myFunc().then(result => {console.log(result)});await를 만나면, 실행이 잠시 중단되었다가 프라미스 처리 후에 실행을 재개합니다!
즉, await를 쓰면 함수 실행을 기다리게 한다.
기획서를 개발로 옮길 때는
-
반복적인 부분을 찾자
사이트를 개발하기전 컴포넌트를 쪼개는 작업을 할 때엔 반복되는 부분을 미리 컴포넌트로 빼준다.
-> 이 과정을 통해 쉽게 가져다 쓸 수 있게 된다. -
가볍게 들어갈 내용 틀을 먼저 잡자
import React from "react";
const Post = (props) => {
return (
<div>
<div>img / nickname / time / btn</div>
<div>contents</div>
<div>image</div>
<div>comment cnt</div>
</div>
);
}
export default Post;
기본적인 폴더 구조
components : 최소단위 컴포넌트를 넣은다.
pages : 페이지 시작점으로 components 컴포넌트를 조합해 페이지를 꾸민다.
redux : 리덕스 모듈과 스토어가 들어간다.
shared : 시작점으로 쓸 파일과 전역으로 쓸 객체, 코드가 들어간다.
데이터 default 작업
컴포넌트.defaultProps{ key1:value1, key2:value2, ... }
페이지를 그리는데 꼭 필요한 데이터를 defaultProps에 담아두면 데이터가 없어서 나는 오류를 방지할 수 있다.
최소단위 컴포넌트 만들기
컴포넌트를 최소단위 기능으로 쪼개서 필요할 때마다 가져올 수 있도록 한다.
Grid를 잡아두면 사이트의 틀을 잡고 적용하기 유용하다.
외부 컴포넌트 불러오기 간략화
import { Text, Input, Grid, Button } from "../elements";
다음과 같이 여러 컴포넌트 불러오는 것을 간략화할 수 있다.
📌회고
프로젝트를 구현할 때 기능단위로 쪼개는 연습을 하고, 작은 기능부터 단계별로 만들어 나가자
다른 package.json 파일을 가져와 적용 시킬 때는 꼭 다시 yarn install 해주어 적용시키자
완전히 이해하고 넘어가겠다는 마음보다는 틀을 이해하고 그 뒤로 부족한부분을 채워나가도록 하자
