#2주차 - Mission2 normalize, connected-react-router, custom-hook

[Week2] 3기 - Mission3,4 필수 구현사항

• (완료) 코멘트폼과 포스트폼에서 글자자가 길어지면 자동으로 폼의 높이가 길어지게 하는 기능을 추가해보세요!

• (완료)
  

• (완료) connected-react-router를 적용 https://github.com/supasate/connected-react-router
  코멘트를 단 친구의 이름을 클릭하면 해당 친구의 포스트들이 보여지게 해보세요.

Mission4 review

1. (리뷰 반영) 일전에 질문드린 폼 높이를 늘려주는 커스텀훅 사용 중 value 값이 커스텀훅 안에 존재해 바깥에 있는 다른 함수인 submit에서 value 값을 초기화시키는 부분에 대한 이슈 해결하였습니다.
   -> value을 초기화시켜주는 reset 함수를 커스텀훅 안에 넣고 submit 함수에서 reset() 호출

2. rootAction, rootSelector, postSelector 으로 해당 기능의 root로 묶고 호출하는 구조가 처음엔 익숙치 않아 버벅였는데, 기능을 구현하며 계속 사용해보니 깔끔하고 편하게 느껴졌습니다. :)

3. post, comment, user 상태값을 리덕스데브툴즈에서 확인하는 것과 같이 connected-react-router를 이용해 router를 상태값으로 확인하고 제어하기 편하게 하려고 사용된 모듈이라고 생각됐습니다. (맞나요?)
   

---

question list

Q1. 내가 쓰고 있는 댓글만 높이값 늘어나게 하기
How to increase the height of only the comments I am writing?

지금은 아래와 같이 hover를 추가해서 적용을 했지만 바람직한 해결방법은 아닌 것 같습니다.
더 좋은 방법이 있다면 작은 팁 하나 부탁드립니다.

I applied hover as below, but it doesn't seem to be a good solution.
If there is a better way, please give me a small tip.

.comment-form > textarea.form-control:hover {
          min-height: ${minHeight}px;
          line-height: ${lineHeight}px;
          border-radius: 0.5rem;
          resize: none;
        }

A. 폼을 참조하는 역할을 하는 ref를 반환하는 커스텀훅을 만들어서 contents를 매개변수로 만들어 구현.

export const useAutoHeight = (lineHeight, contents) => {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.style.height = 'auto';
    ref.current.style.height = ref.current.scrollHeight + lineHeight + 'px';
  }, [contents]);
  return [ref];
};

https://github.com/learn-programmers/prgrms-rct-3/pull/41/commits/6e1fa8dcdb94cf73fbfdaf254dd94d06a79e90db

---

Q2. 조언 주셨는데 이해를 못했습니다 (흑..) 어떤 의미로 말씀하신건지 조금 더 설명해 주실 수 있나요?

A. post 리듀서의 상태값을 normalize했을 때 state는 크게 아래와 같이 나뉜다.

이때 entities / ids를 리듀서로 나눠서 기재한다.
이로인해 해당 state에만 변화를 주는 액션을 각각 설정할 수 있다는 장점이 있다.

---

Q3. 폼 늘어나는 기능에 사용되는 minHeight는 폼의 높이값에 관여하는 건 알겠는데 lineHeight는 어떤 구현을 위해 상태값으로 존재하는지 궁금합니다.

---

Q4. vscode 단축키 질문

조금 번외적인 질문입니다.

혹시 vscode 중에 위와 같이 특정 기능을 하는 함수를 반환하는 파일이 어디에 사용되고 있는지,
혹은 filterPost를 검색하면 이 함수가 어떤 파일에 해당하는지 확인하는 기능이 있나요?

A.
함수를 어디어디에 사용되는지 확인하는 기능이 있는지는 잘 모르겠지만, 비슷한 걸로 검색한 텍스트내용을 가지고 있는 파일들을 검색하는 기능은 있어요.
Mac 기준: command + shift + F 누르고 'filterPost' 검색
Window 는 잘 모르겠지만 command키를 ctrl 아니면 alt로 대체해서 사용해보시면 나올 거 같습니다.

---

Q5. connected-react-router vs react-router-dom
전자는 리덕스 데브툴즈에서 라우트의 state 값을 확인할 수 있지만 원페이지 이동(새로고침x)이면 값 갱신이 안 되는 것 같습니다.
후자는 데브툴즈에서 state 값을 확인할 순 없지만 useParams 속성을 가져다 사용할 수 있어서 Link 로 원페이지 이동(새로고침x)이 가능한 것 같습니다.

---

normalize

기존의 state 구조가 한 객체 안에 모든 정보를 담고 있는 구조였다면
정규식 state 구조는 id값만을 기재해 서로 참조하여 selector로 찾는 구조이다.
정규식 구조의 장점으로는 state가 깊어지지 않는다는 장점이 있고 (찾기 쉬움)
개인적으로는 리렌더링이 필요한 부분에서만 일어난다고 생각한다. (댓글 변화시 댓글 state만 변경)