[Day 35] 2022-0810

🐈오늘 공부한 것

✔️styled-component

컴포넌트 주도 개발이 등장하기 이전에 HTML CSS JS 로 관심사를 분리하는게 대세였다면, 요즘은 컴포넌트 위주로 기능과 스타일까지도 한번에 개발하는 방법도 등장했다. 리액트에서 JSX 문법을 사용하면 기능과 화면을 한번에 개발할 수 있지만 CSS는 별도로 분리해야 하는데, styled-component 라이브러리를 사용하면 CSS IN JS 즉 자바스크립트(리액트) 코드 안에서 CSS 스타일이 적용된 엘리먼트나 컴포넌트를 만들어서 사용할 수 있다. 오늘 벨로퍼트님의 투두리스트 만들기 예제를 연습하면서 처음 보게된 개념인데, 처음에는 코드가 지저분하다고 생각해서 CSS 로 분리를 했다가 state에 따라서 다른 스타일을 보여줄 수 있는 부분이 있어서 연습겸 적용을 해보았다. 지금 따로 만들고 있는 투두 리스트를 styled-component 로 바꾸면서 연습해보려고한다. 

✔️Context API

이 개념도 오늘 처음 봤다. useReducer 라는 훅과 함께 상태관리를 도와주는 도구? 라고 할 수 있다. Redux라는 상태관리 라이브러리가 존재하긴 하지만, 리덕스가 조금 큰 규모에 적용된다면 Context API 는 조금 더 작은 규모에 적용할 수 있다고 한다. (참고) 상태관리가 필요한 이유를 정리하자면, 리액트의 데이터는 하향식 단방향 흐름을 갖고 있기 때문에 여러 컴포넌트가 하나의 state에 영향을 받는다면, 공통의 상위 컴포넌트-조상님께서 state를 관리해주고 props로 전달하는 방식을 사용해야한다. 그런데 이게 너무 많은 범위에 영향을 준다면 부모로부터 자식으로, 또 그 손주의 증손주까지 연결되어야 하는데 이런 방식은 딱 봐도 굉장히 비효율적이다. 그렇기 때문에 상태관리가 필요한 것이다. Context API 자체가 상태를 관리해주는 개념은 아니고, 여기에 state가 있다면 그에 관련된 내용들을 Provider로 제공하고, 그 state가 필요한 컴포넌트에서는 Consumer로 받아올 수 있다고 한다. 즉 컴포넌트의 전역 데이터를 Context에 저장한 뒤에 사용하는 것이라고 볼 수 있다. 링크를 참조하면 예제를 통한 실습으로 개념을 익힐 수 있다.

✔️useReducer Hook

이것도 투두 리스트 예제를 연습하면서 처음 본 개념이다. context API와 함께 상태를 관리해줄 수 있는 훅이라고 한다. 이 훅을 사용하면 state를 업데이트 하는 로직을 reducer 함수로 따로 분리할 수 있다. useReducer 훅에 상태를 업데이트 할 reducer 함수와 초기값을 전달해서 state를 등록할 수 있다. useReducer는 state와 dispatch를 반환하는데, dispatch에 객체를 넘겨주면 reducer 함수의 action으로 전달된다. reducer 함수에서 state와 action 값을 받아와서 action에 전달된 값에 따라 상태를 변경하는 로직을 실행한 뒤에 새롭게 업데이트 된 상태를 리턴한다. 오늘 사용해봤는데 연습이 조금 더 필요할 것 같고, Context API와 함께 사용해보니 뭔가 많이 어려웠다..! 

✔️flex-item의 grow 속성

오늘 예제를 보다보니 flex-item 에 해당하는 컴포넌트에 flex : 1 이라는 속성이 적용된 것을 발견했다. 복습 겸 다시 찾아보았는데 내가 제대로 몰랐던 부분이라 정리하려고 한다. display : flex 속성이 적용된 요소의 자식요소는 flex-item이 되고 이 item들은 flex라는 속성을 설정해줄 수 있다. 차례대로 flex-grow, shrink, basis 인데, flex:1 이라는 의미는 grow 값이 1 이라는 의미이다. 그리고 이 말은 flex item 이 차지할 수 있는 공간의 비율을 나타낸다. 만약 flex 공간 하나에 flex-item이 한 개 존재한다면 flex-grow가 1일 때 전체 공간을, item이 두 개 존재할 때는 각각 전체(1)의 0.5만큼의 공간을 가지게 되는 것이다. 

✔️투두 리스트 : localStorage 사용하기 

요즘 배운 것을 복습하면서 내 것으로 만들기 위해서 간단한 투두 리스트를 만들고 있다. 시작한지는 꽤 되었는데 여러가지 할 것이 많다보니 진도를 빨리 못나가고 있다.🥲

아무튼 오늘 목표는 입력된 투두 리스트 목록을 새로고침해도 볼 수 있도록 localStorage에 저장하는 것이었다! 처음에는 어떻게 접근을 해야할지 몰라서 살짝 막막했는데 (리액트 코드로 바뀌니까 약간 막막해졌다) todoList가 state에 등록되었고, 이 state에서 하나씩 화면에 뿌려주는 것이라면, todoList 자체를 localStorage에 등록하고, 초기값을 localStorage에서 조회되어 가져온 값으로 하면 될 것 같았다. 초기값을 로컬스토리지에서 불러올 때, 등록된 todoList가 없다면 undefined가 떠서 에러가 발생하는데, 이걸 방지하기 위해서 단축평가를 사용해 조회 결과가 undefined 일 경우에는 빈 배열이 할당되도록 했다. 단축평가를 스스로 활용한 것은 처음인 것 같다... 

function TodoContainer() {
  // localTodoList 불러오기 : localStorage에 저장된 내용이 없을 경우 빈 배열을 초기값으로 한다.
  const localTodoList = JSON.parse(localStorage.getItem('todoList')) || [];
  const [todoList, setTodoList] = useState(localTodoList);

  // 초기 마운트 될 때, todoList가 업데이트 될 때 로컬스토리지에 todoList 저장
  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todoList));
  }, [todoList]);

  return (
    <div className="todo__background">
      <div className="todo__container">
        <h1>To Do</h1>
        <TodoInput setTodoList={setTodoList} todoList={todoList} />
        <TodoItems todos={todoList} />
      </div>
    </div>
  );
}

🐈더 공부할 것

1. 투두 리스트 : 체크 박스 state 수정 / 삭제 기능 / 코드 최적화 !!! / styled-component 적용해보기

2. 리액트-타입스크립트 스터디 과제 : 코드 분리하여 별도 레포 만들기 / 숫자 야구 리팩터링 / SPA 제작

3. 리액트 Hook 추가공부 : useRef, useMemo, useCallback, useReducer ... 

🐈오늘의 느낀 점

1. 오늘 낮에 진행한 예제는 튜토리얼이 있어서 할만할 것이라고 생각했는데 오산이었다... 배워도 배워도 배울게 끝없이 나온다는 느낌을 받았다. 재미도 있었고 빨리 잘하고 싶다는 마음도 들었는데, 개념을 잘 모르니까 에러가 나도 어떻게 해결해야할지 막막한 것은 있었다. 처음에 styled-component 적용 안하고 익숙한 CSS로 했었는데, 좀 귀찮아도 생각을 고쳐먹고 새로운 것을 해보려고 노력해야겠다. 

 

2. 리액트-타입스크립트 스터디에서 다른 잘하시는 분들의 코드를 보고 엄청난 동기부여를 받았다...! 다른 할 것이 많아서 후딱하고 해치운다는 느낌으로(반성...) 과제를 해갔는데, 주말에 시간을 내어서 다 뜯어 고쳐볼 생각이다. ㅋㅋ 솔직히 이해 안되는 로직도 있고 해서 하나씩 뜯어보면서 다시 내걸로 만들어야겠당.