3주차 React 숙련 회고록

개인과제 결과물
https://www.youtube.com/watch?v=EaYE4_JyVsk

깃허브
https://github.com/guswls1419/react_practice_2

react 입문주차를 마치고, react 기초개념을 조금 익혔다고 생각했는데
이번주에 또 새로운 것을 접하게 되었다.
redux를 이용해 게시목록을 관리하고 파이어베이스에 저장하여 데이터를 가져오는
'나만의 사전 만들기'과제 였다.
과제의 자세한 내용은 아래와 같다.

✅ 게시글 목록 페이지

• 게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
• 게시글 내의 예시는 파란 글씨로 보여주기
• 게시글 목록을 리덕스에서 관리하기
• 게시글 목록을 파이어스토어에서 가져오기

✅ 게시글 작성 페이지

• 게시글 작성에 필요한 input 3개를 ref로 관리하기
• 작성한 게시글을 리덕스 내 게시글 목록에 추가하기
• 게시글 목록을 파이어스토어에 저장하기

➕ 추가로 해보면 좋을 기능(필수❌ )

• 무한 스크롤 붙이기
• 게시글 수정해보기

과제 내용을 보고 리덕스와 파이어베이스는 일단 내가 당장 구현해낼수 있는 기능이 아니니깐 제쳐두고 header, 단어장이 붙을 카드, 버튼, 단어입력창 등 눈에보이는 것들부터 컴포넌트로 만들어보기로했다.

입문주차에 배운내용대로 state와 props를 적절히 사용하여 컴포넌트를 만들었고 Styled Components 를 사용하여 css를 적용시켰다.
그리고 router를 이용하여 페이지간 이동이 가능하게 적용시켰다.
여기까진 큰 어려움없이 구현해 나갔다.
하지만 redux라는것을 구현해야하는데 redux에 대해 전혀 몰라 강의를 들으며 어떤식으로 사용하는지 익히기로 했다.

👉redux 참고자료

겨우 redux에 대한 개념을 어느정도 익혔다 싶었는데.. 갑자기 파이어베이스가 등장하였고,
middlewares라는것이 나오기 시작하면서 멘탈이 터졌던것같다..

파이어베이스와 연결할때 비동기작업이어서 middlewares에서 비동기처리 작업을 해주어야한다고..
비동기는 뭐고 동기는 뭔지 정말 하나도 모르는 단어들이 연발했다.
일단 강의를 따라서 작업하고, 이후에 하나하나 검색해가며 공부하기로했다.

강의를보며 따라한 결과 단어카드를 create,lode 하는거까진 어떻게 기능을 구현해 내었다.
delete,update 기능도 추가적으로 구현해 내보려하였으나, 강의를보고 따라친 코드이해가 안된상태에서 추가적으로 코드를작성하기엔 너무나도 큰무리가 있어 일단, 따라친 코드만 보며 코드풀이를 하기로 하였고, 대략적으로 어떤식으로 코드를 작성하는지 조금 이해가 된 다음, delete,update기능을 추가적으로 구현해보기 시작 했다.

가장 어렵고 가장 헤맸던 부분은 바로 update 기능구현부분이었다.
수정하기버튼을 눌렀을때뜨는 창에 input창에 기존의 값이 남아있게하고, 그걸 수정했을때 수정한값으로 다시 카드장이 붙도록해야하는데 도저히 감이 잡히지않아, 조원분에게 결국 조언을 구하였던것같다.

그리하여 update기능을 구현해내 코드는 아래와 같다.

• 수정하기 input창

  const params = useParams();
  const dispatch = useDispatch();

  const newData1 = useSelector((state)=> state.skilled.list);
 
  const ChingeInputRef_1 = useRef(null);
  const ChingeInputRef_2 = useRef(null);
  const ChingeInputRef_3 = useRef(null);
  
const chinges = (Change_id)=>{
    const name = ChingeInputRef_1.current.value;
    const second = ChingeInputRef_2.current.value;
    const rdata = ChingeInputRef_3.current.value;
       
    dispatch(updateSkilledFB({
      0:name,
      1:second,
      2:rdata,
      id : Change_id  => 값비교를 위해 넘겨준값
    }));
  };
  
  return (
  
     //--생략--
     
   <Input_wrap1 >
      <Label1 for='Name'>React 용어</Label1>
      <Name1 ref={ChingeInputRef_1} type='text' id='Name' defaultValue={newData1[params.chinge_index][0]} />
   </Input_wrap1>
   
   //--생략--
   
  <Link to='/' style={{textDecoration: 'none'}}>
      <Button1 onClick={()=>{chinges(newData1[params.chinge_index].id)
       }} >수정하기</Button1>
   </Link>

//--생략--

• 수정하기 middlewares

export const updateSkilledFB = (skilled_Chingeindex) => {
    console.log(skilled_Chingeindex.id)
    return async function (dispatch) {
        const docRef = await doc(db, "Skilled", skilled_Chingeindex.id);
        
        updateDoc(docRef, {
            0:skilled_Chingeindex[0],
            1:skilled_Chingeindex[1],
            2:skilled_Chingeindex[2]
        });
        dispatch(updateSkilled(skilled_Chingeindex));
    };
};

middlewares부분에서 어떤값을 어떻게 가져와야 내가 클릭한 카드의 데이터가 정상적으로 가져와질지 엄청 고민하고 특히 많이 헤맸었는데,
조원분의 도움을 받아 id값을만들어 dispatch 넘겨주고 파이어베이스에 고유로 있는 id값을 middlewares에서 불러와 비교를 해준 후 내가 수정을 원하는 카드의 데이터를 불러와 수정 하기 기능을 구현해 낼수 있었다.

redux만 해도 너무 어려운데 여기에 파이어베이스 까지 추가가되니 뭐가 redux고 뭐가 파이어베이스인지 정말 많은 혼동이 있었던것같다.

지금은 어떤게 redux고 어떤것이 파이어베이스 코드인지 또, 코드가 어떻게 돌아가는지 조금 알것같지만 혼자서 스스로 코드를 짜내려가기엔 아직 많이 부족하여 redux에대해 더많은 공부가 필요할것 같다.

4주차 핵심키워드

React hooks

리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 기술이다.
함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다
리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉜다.
기존의 개발방식은 일반적으로 함수형 컴포넌트를 주로 사용하되 state이나 Life Cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었다.
그런데 hooks의 등장으로 인해함수형 컴포넌트에서도 이러한 클래스형 컴포넌트의 작업들을 할 수 있게 되었고 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들을 함수형 컴포넌트를 사용하므로써 해결할 수 있었다. 특히나 OOP(객체 지향이랍니다)를 선호하지 않는 개발자에게 있어서 React를 함수 중심으로 사용할 수 있게 되었다

라이프 사이클

컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있다.
모든 리액트 컴포넌트는 라이프사이클을 보자면 세가지 카테고리로 나눌 수 있다.

• 생성 될 때 = Mounting = 컴포넌트가 화면에 나타남
  컴포넌트의 인스턴트가 생성되어 DOM 상에 삽입되는 단계로, Mounting은 라이프사이클이 종료될 때 까지 한번만 일어난다.

Mounting 단계 : constructor >  getDerivedStateFromProps > render > componentDidMount

• constructor : 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출된다.
• render : 화면에 표현될 JSX를 반환하고 화면에 그린다.
• componentDidMount : 컴포넌트가 화면에 모두 그려진 이후 호출된다.

componentDidMount 메서드는 첫 렌더링 이후 실행된다. 엔드포인트에서 클라이언트로 데이터를 불러와야하는 경우라면, API 호출을 하기 좋은 위치이다. 데이터를 받아 올 때 setState 메서드를 이용하여 컴포넌트를 업데이트할 수 있다.

• 업데이트할 때 = Updating = 수정할 때 = 컴포넌트가 업데이트(수정)됨
  

props 또는 state가 변경되어 컴포넌트가 업데이트 되는 단계로 아래 메서드들이 이 단계에서 순서대로 호출된다.
.
Updating 단계 : static getDerivedStateFromProps > shouldComponentUpdate > render >getSnapshotBeforeUpdate > componentDidUpdate

• render : 데이터가 변경되면 자동으로 호출되고, 화면을 다시 그린다.

• componentDidUpdate : 화면이 다시 그려진 이후 호출된다.

• 제거할 때 = Unmounting = 컴포넌트가 화면에서 사라짐
  컴포넌트가 DOM 상에서 제거되는 단계이다.
  Unmounting 단계 : componentWilUnmount

• componentWillUnmount : 컴포넌트가 화면에서 제거되기 전에 호출된다.

• 흐름
  

4주차 회고

역시나 쉽지않은 한주였다. 원래대로의 나의 계획은 과제를 얼른 끝내놓고 추가적인 공부를 하는것이였는데 redux CRUD 구현을 모두 해내는것이 쉽지않아 그냥 이번주는 내도록 redux에대해서만 공부를했던것 같다.
기술매니저님들께서도 redux공부는 확실히 해놓을라고 하시는걸보면 redux는 중요한 개념인것같다.
실제로 이번주차에 과제를 해내고나서 느낀바로도 잘사용할수있다면 상태관리하는데에있어 굉장히 유용할것같다고 느끼기도 하였다.

React는 내가 생각한것보다 훨신 더 어려운것같은데 점점 알면 알수록 기존의 자바스크립트보다 편한점들이 훨씬 더 많은것 같아 정말 대단하다라는 생각을 하게되는것 같다.
이런것들을 하나씩 느끼면서 점점 더 React가 재밌어지는것 같다.
요즘 정말 눈뜨면 컴퓨터앞이고 컴퓨터를 종료하면 새벽 2~3시 인데도 힘들어서 일찍 자야지 하는맘보다 재밌어서 조금만더 조금만더 하며 점점 자는시간이 늦어지고 있는 지금 내모습이 나스스로가 신기하기도하다.

다음주차인 React심화 주차에도 redux가 나오는것으로 알고있는데 좀더 깊이 redux에 관해 파보아야 겠다.