[항해99] W4: 4주차 WIL - React 숙련~심화

Hello, React!

항해99 4주차, 주특기 React 숙련 과제까지 Clear!
심화주차에서는 Mock server 및 Redux toolkit을 활용한 CRUD 복습을 진행하기로!

👏 리액트 숙련 주차 회고

👍 배운 점

제법 프로젝트다운 작업 👏

►Go to project

Redux

• redux를 직접 사용해보니 toolkit 없이 구현하기에는 다소 복잡하고, 구조가 어려운 것처럼 느껴졌지만, 확실히 유지보수 측면에서 봤을때는 기존 useState 와 props만 활용하여 상태를 관리하던 것 보다는 훨씬 구조적이고 용이한 방식인것 같다.
• 여러 페이지에서 동일한 상태를 활용하는 경우에, 동일한 코드가 중복으로 산재되는 현상을 막을 수 있어 전체적인 코드의 효율성 측면에서도 좋고, 기능을 수정할때는 스토어에서 수정이 가능하기 때문에 원하는 코드를 빠르게 확인하기에도 적합한 방식인 것 같다.
• 아직 Toolkit을 본격적으로 사용하기 이전이라, 코드가 다소 길고 복잡하게 느껴지지만 심화주차에서 toolkit을 도입하면 코드를 작성할때에도 더욱 편리하게 이용이 가능하다고 하니 기대가 된다.

GIT & github

• 사실 이건 숙련 주차에 대한 회고라기 보다는 심화주차에 도입한 방식에 대한 이야기지만, 협업을 하면서 레파지토리를 생성하고, 협업자가 Fork를 떠서 작업을 하는 방식을 도입했다. 작업에 대한 욕심이 있는 팀원을 만나 각자 전체 개발을 진행해보고, 더 나은 코드를 살리는 방향으로 개별적으로 진행하고 합치는 방식으로 해보기로 했는데, 작업을 나누어 진행하는 방식보다는, 코드리뷰를 통해 효율적인 코드에 대한 논의를 해볼 수 있을 것 같아 기대가 된다.
• 서버 배포와 merge-conflict 해결, styling 정도만 어느정도 분담해서 진행할 예정.
• 깃의 issue기능을 처음으로 사용해보기 시작했다. 기존에 사용한 적이 있던 JIRA와 비슷한 점이 많아, 나름대로 체크리스트도 만들고, 단계별 이슈를 생성해서 관리해볼 예정. 추후 팀원이 많아졌을때는 개별 할당 및 체크도 깃에서 해볼 수 있지않을까? 😙

Styled Component

• 이제 css 구조화 및 스타일링에 어느정도 적응이 된것 같다. 전역 스타일을 포함하여, 헤더 / 푸터 / 본문 영역으로 그리드를 잡고, 본문 영역에서는 플렉스 박스를 활용하여 스타일링을 진행했다. 아직 컴포넌트를 어디까지 나누어야 할지, 어떤걸 컴포넌트로 분리하는게 효율적인지에 대한 질문은 계속 남아있지만, 점차 익숙해지겠지?

🥲 아쉬운점

CSS) 반응형 작업 시 IOS에서만 아이콘이 틀어지는 현상

• 구글 chrome 반응형이나 안드로이드 디바이스에서는 아이콘의 위치가 PC와 마찬가지로 적절하게 보여지는데,아이폰/아이패드와 같은 IOS 디바이스 환경에서는 아이콘이 밀려 보이는 현상이 발생했다.

• PC/MO에 적합한 폰트, 레이아웃 조정 등 전체적으로 만족스러운 CSS 작업이었지만, 아이콘은 최적화가 되지않아 아쉬움이 남는다. 다음에는 특정 환경에서만 문제가 생기는 경우 어떻게 개선할 수 있는지 방법을 찾아봐야지😭

• 스타일링이 필수 범위가 아니고, 기능 구현이 우선순위이다 보니, 기능 작업을 완료하고 css 디테일을 더하는데, 항상 막바지에 가면 더 수정하고 싶은게 마구 생겨나서 일정 내 원하는 만큼의 퀄리티를 내기가 어렵다... 이건 내 스킬이 쌓여야 해결이 가능한 범위겠지...

CSS) 토글형 UI 노출

• PC에서는 각각 고정된 박스안에서 투두아이템 카드가 보이고, MO에서는 해야할일과 완료한일을 토글로 노출하고 싶었는데 마찬가지로 일정이슈로 인해 기존에 작업해보았던 방식인 1열로 나열하는 형식으로 반영했다. 조금 더 다양한 레이아웃과 구동방식을 트라이 해봐야지!

😎 개선방향

반응형 이슈

• 특정 디바이스 혹은 특정 환경에서만 이슈가 있는 경우 조치할 수 있는 방안 찾아보기
• 특히, 아이폰/아이패드 반응형 관련 다른 개발자들의 의견을 많이 찾아봐야겠다.

토글형 UI 트라이해보기

• 시간이 부족해서 못한건지, 실력이 부족해서 할 수 없는지 트라이해보기전엔 모르니까! 한번 도전해봅시다!!

👊 JS / React 개념다지기

라이프사이클 되짚어보기

• LifeCycle Method는 '생명주기 메소드'라고 부른다. 생명주기 메소드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메소드를 의미한다.

	클래스형 컴포넌트	함수형 컴포넌트
특징	Render()메소드와 Component 상속 필수	- 컴포넌트 선언 및 프로그래밍 시 간편함 -React Hook 사용 가능
단점	- state, props 사용이 어려움 - 메모리 사용량이 높음	- state와 생명주기(Life Cycle)메소드를 사용하기 위해서는 별도 구현 필요 => useState / useEffect로 대체

클래스형

마운트 될 때 발생하는 생명주기

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

업데이트 할 때 발생하는 생명주기

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

언마운트 될 때 발생하는 생명주기

• componentWillUnmount

함수형

• 함수형 컴포넌트는 생명주기에 따른 동작을 React Hook 중 useEffect를 활용하여 설정할 수 있다.

React Hooks!

리액트 훅이란?

리액트 v16.8에 새로 도입된 기능으로, 함수형태의 컴포넌트에서 사용되는 몇가지 함수를 Hook이라고 부른다.
상태 관리를 도와주는 useState, 렌더링 직후 작업을 설정하는 useEffect 등 다양한 훅이 있습니다.

리액트 훅을 사용하는 이유

기존 클래스형 컴포넌트는 리액트의 큰 진입장벽이자, 코드의 재사용성, 코드 구성을 어렵게 만들고 바닐라JS 의존도가 높은 형태였습니다. 클래스는 잘 축소되지도 않고, 리로딩이 깨지기 쉽거나 신뢰하기 어려운 몇가지 단점이 있었기 때문에 최근에는 클래스형 컴포넌트 사용을 지양하고 함수형 컴포넌트 사용이 확장되고 있습니다.
따라서 함수형 컴포넌트를 보다 효율적으로 사용하기 위해 신규 도입된 기능인 것입니다.

리액트 훅 종류

useState

• State: 컴포넌트의 상태
  const [state, setState] = useState(initialState)

useEffect

• 코드의 LifeStyle에 따라 Mount 될 때, Update 될 때, Unmount 될 때 특정 작업을 실행 시켜줄 수 있는 함수

//코드스타일 1
useEffect(()=>{/*작업*/});

//코드스타일 2
useEffect(()=>{/*작업*/}, [value]);

useRef

• const ref = useRef(value) 로 useRef 를 이용하면 { current:value }를 return 받을 수 있음
• 위 반환값은 전 생애주기 동안 유지되므로, Unmount 되기 전까지 활용 가능
• 저장공간의 개념
  State의 변화 > 렌더링 > 컴포넌트 내부 변수 초기화
  Ref의 변화 > No 렌더링 > 변수값 유지

• State처럼 값을 저장할 수 있는 변수가 되지만, 불필요한 렌더링을 방지할 수 있음

• DOM 요소 접근 : const ref = useRef(value) <input ref={ref} 같은 형태로 활용 시, DOM 요소에 접근이 가능함 (인풋에 focus를 주는 등의 활용)
  == VanilaJS의 Document.querySelector()와 동일한 효과

useMemo

• 컴포넌트 최적화를 위해 사용되는 Hook
• Memo = Memoization
• 동일한 값을 리턴하는 함수를 반복호출 해야하는 경우 첫 값을 리턴할때 메모리에 저장하여 이후 캐시에서 꺼내서 사용할 수 있도록 도와준다.

const value = useMemo(() => {
  return calculate();
}, [item]);

useCallback

• 컴포넌트 최적화를 위해 사용되는 Hook
• useMemo와 비슷하게 memoization 기법으로 최적화를 도와주는 Hook이다.
• 콜백함수 그 자체를 메모이제이션한다. 즉, 컴포넌트가 리렌더링 될 때에도 이전에 할당받은 함수 객체를 그대로 캐시에서 꺼내와 불필요한 함수재실행을 막아줄 수 있다.

useCallback(() => {
  return value;
}, [item])

const calculate = useCallback((num) => {
  return num +1;
}, [item])

useContext

• Redux, Recoil, Zustand와 유사한 전역 상태관리를 도와주는 React Hook
• Context를 활용할 경우 컴포넌트 재사용이 어려워질 수 있기 때문에, 단순히 Prop Drilling을 피하기 위해서라면Component Composition을 사용하는것이 더욱 효율적이다.

useReducer

• useState와 유사하게 state 를 관리할 수 있는 Hook으로 여러개의 하위값을 포함하는 복잡한 state를 다뤄야할 때 유용하다.
• Reducer / Dispatch / Action 3가지 요소로 구성된다.
• 사용자의 Action이 발생했을때 Dispatch를 통해 Reducer에 요청을 전달하고, Reducer에 담겨있는 함수가 실행되도록 한다.

Custom Hook

• 반복되는 리액트의 함수들을 묶어 나만의 리액트 훅을 만들 수 있다.

Ex. 커스텀훅을 만드는 예시

function useEat(food){
  useState...
  useEffect...
  blahblah
return [eat, setFood]
}