React Plus Start! (심화프로젝트)
이번주는 기본주차에서 배운 리액트를 좀 잘 다루기 위한 내용들을 배우고 매거진사이트를 만드는 과제 또는 캘린더를 만드는 과제를 제출하는 주차였다
나라면 프로젝트를 시작할때 어떻게 나눌까?
기본주차가 페이지단위로 구현에 초점을 맞추었다면 이번 심화주차에서는 컴포넌트 단위로 잘게잘게 쪼개어 각각 조건에 따른스타일로 끼워맞추는것 부터 시작되었다. 조건에 따라 버튼이 늘어났다 줄어들었다 페이지와 컴포넌트를 넘나들며 신경쓰다보니 너무나 어려웠다. 무지성으로 페이지에 스타일을 부여하던것이 props속성으로 전달하여 스타일이 적용되니 코드가 간결해지도 가독성이 높아 무조건 익숙해져야겠다 생각들었다.
기하급수적으로 불어나는 학습량.
하나를 알게되면 열개이상을 알아야 이해가 되는 개념들과 새로운 지식들이 너무버거워 정확한 이해없이 일단 프로젝트 제출에 의의를 두자는 나의 공부목표에 잠시 브레이크를 걸었다. 뭉칠 눈덩이라도 있어야 눈을 굴려 커다랗게 만들겠는데, 눈이 뭉쳐지기도 전에 매번 부서져버리니..
특히 리덕스와 리액트훅을 이해가 되지 않은채로 계속 진도를 나가다보니
어느순간 생각없이 코드만 따라 치고있어서 잠시 강의를 멈추고 이해하는 시간을 가졌다.
리덕스(Redux)
리액트는 각 컴포넌트 마다 state라는 데이터를 활용할수 있고 전달도 가능한데 부모에서 만들어진 state가 props로 자식컴포넌트로 넘겨주다보면 자식컴포넌트에서 수정할수 없게 되는데, 이걸쉽게 도와주는 state관리를 도와주는것이 redux 라이브러리다.
- State: 리덕스에서 저장하고 있는 데이터
- Store = State집합소
- Action =데이터를 변경할 때 발생
- ActionCreator = 액션 생성 함수, 액션을 만들기 위해 사용
- Reducer = Redux에 저장된 데이터를 변경
- Dispatch = 액션을 발생시키는 매개체
1.컴포넌트는 디스패치를 통해 액션을 발생
2.액션은 리듀서에 전달
3.리듀서는 액션타입에 따라 State값을 변경.
4.State가 변경되면 구독하고있는 컴포넌트들이 리렌더링
만약 중간에 서버요청을 보내고 싶으면 Redux-Thunk라는 미들웨어를 통해 요청또는 응답을 받아오면된다
리액트훅(React Hook)
함수형컴포넌트에서도 state관리를 가능하게 만들어주는 기능
- useState
const [갱신값, 갱신하려고 쓰는 함수] = useState(초기값);
const [is_login, setIsLogin] = React.useState(false);- useEffect
컴포넌트가 렌더링 될때마다 특정 작업을 실행할수 있도록 하는 Hook
useEffect(수행하고자하는작업(function), 검사하고자하는 특정값or빈배열(deps)
useEffect(()=> {
console.log("변수값이 변해서 마운트 될때만 실행함");
}, []}
1.컴포넌트가 마운트됐을때(처음나타났을때
컴포넌트가 화면에 가장 처음 렌더링 될때 한번만 실해하고 싶을때는 deps위치에 빈배열
useEffect(()=> {
console.log("렌더링 될 때 마다 실행됨");
});
만약 배열 생략하면 리렌더링 될때마다 실행
2.컴포넌트가 업데이트 될때(특정 프롭스,스테이트가 바뀔때)
useEffect(()=> {
console.log(검사하고싶은값);
console.log('업데이트 될때 실행');
}, [검사하고싶은값]);
특정값이 업데이트 될때 실행하고 싶을때는 deps위치의 배열안에 검사하고 싶은값 넣어줌
(의존값이 들어있는 배열 deps라고 한다. dependency)- useSelector
리덕스의 상태를 조회할수 있는 훅
const 결과 = useSelector((상태)⇒ 가져올 상태값)- useRef
const 집어넣을놈 = useRef();
선택하고 싶은 DOM에 속성으로 ref값 설정
<input ref={집어넣을놈} />
집어넣을놈.current.
useRef로 변수를 관리하게 되면 변수가 업데이트된다고 컴포넌트가 리렌더링 되지 않음
굳이 리렌더링 할 필요 없는 변수라면 useRef로 관리
-setTimeout, setInterval
-scroll위치
-배열에 새 항목을 추가할때 필요한 고유값 key심화프로젝트 (큐레이션사이트)
.gif)
나는 쿠팡큐레이션 사이트를 만들고 싶었고 결론은 미완인채로 과제가 마무리 되었다.
로그인과 회원가입은 모달창을 띄우고 이미지를 업로드하는게아니라 url을 붙이면 해당사이트의 가격값과 이미지값을 자동으로 업로드해주는 기능을 만들고 싶었으나 역량부족..
특히나 과제에서 기본적으로 기능을 구현하는것도 제대로 해내지 못해 기한내에 완성할수 없었다.
특히 기능구현부분에 대해 스스로 해내지 못했다는 박탈감에 멘탈적으로 너무 힘들었다.
어제의 나보다 성장하기 🏃🏻♂️
지난번 개인과제와 이번 심화발제를 하면서, 배우기도 많이 배웠고 멘탈적으로도 많이 흔들렸다.
특히 이정도 실력으로 앞으로 닥칠 과제나 프로젝트를 제대로 수행해낼수 있을까 의문이 계속들어 고민이 정말 많았으나, 남과 비교했을때 뒤쳐졌지만 지난 3주돌이켜보면 스스로도 정말 많이 성장했다고 생각한다.
3주차 누적 공부시간 : 432시간 56분
