#1주차 - Mission2 필수 구현사항

[Week1] 3기 - Mission2 필수 구현사항

2. 라우터를 설정 / 멀티 레이아웃 컴포넌트 생성

Mission2 review

1. 라우터를 설정 완료 & 멀티 레이아웃 컴포넌트 생성 완료
   
   처음 잡앗던 홈 라우터 코드는 위와 같았습니다. 창원님의 라우터 소스와 미션 2의 참고자료 중 https://simonsmith.io/reusing-layouts-in-react-router-4 링크를 보고 Route에 레이아웃 컴포넌트를 재사용한다면 App.js에 사용될 라우트 코드를 조금 더 줄여볼 수 있을 것 같아 리팩토링하여 아래와 같이 수정했습니다.
   

---

1주차 미션 에러 모음
https://velog.io/@mollang/%EC%97%90%EB%9F%AC-%EB%AA%A8%EC%9D%8C#%EB%AF%B8%EC%85%98-1%EC%A3%BC%EC%B0%A8

---

question list

Q1. 1번 코드와 2번 코드는 동일하게 작동합니다. Route의 render의 기능와 component의 기능이 같은 역할을 해서인지 궁금합니다.
(eng)
Code 1 and Code 2 work the same. and I wonder if 'render=' and the 'component=' play the same role.

// 1.
            <Route
              path="/"
              exact
              render={() => (
                <DefaultLayout>
                  <Home />
                </DefaultLayout>
              )}
            />

// 2.
            <Route
              path="/"
              exact
              component={() => (
                <DefaultLayout>
                  <Home />
                </DefaultLayout>
              )}
            />

A. render 와 component 는 다른 동작을 합니다. component 에 컴포넌트를 반환하는 inline 함수를 넣으면 기존의 컴포넌트를 업데이트 하는 것이 아니라 매번 React.createElelemt 로 새로운 컴포넌트를 만듭니다. render 는 기존의 컴포넌트를 업데이트 하는 방식입니다.
https://reacttraining.com/react-router/web/api/Route/component
https://reacttraining.com/react-router/web/api/Route/render-func
(번역글) https://mingcoder.me/2019/12/04/Programming/React/react-router-component-vs-render/

---

Q2. 네비게이션이 포함된 디폴트 레이아웃 코드입니다. 이 코드에 있는 matchProps의 역할이 궁금합니다.
(eng)
I am curious about the role of matchProps.

(issue file => src/layouts/DefaultLayout.jsx)

matchProps는 저 빨간 라인인가요?

A. matchProps 는
match/ location/ history 와 같이 브라우저 라우팅에 관련된 데이터, 함수를 가지는 객체입니다.
https://reacttraining.com/react-router/web/api/Route/route-render-methods

---

3. Extra Mission 댓글 기능

Extra Mission review

1. 댓글 기능 완료
   1-1. 댓글 토글
2. isLoggedIn true, false
   App.js state에 isLoggedIn 상태값을 네비게이션이 있는 DefaultLayout으로 내려줘서 간단하게 로그인 전후 분기해보았습니다. (이걸 의도하신 게 아닌 것 같긴 하지만)
3. 좋아요 기능 완료

---

question list

Q. 빨간 라인이 {...rest}를 의미하나요? isLoggedIn 상태값 하나만 전달하는 방법은 없을까요?
Does the red line mean {... rest}?
Is there any way to pass only one isLoggedIn status value? Because I only need isLoggedIn.

(issue file => src/layouts/DefaultLayout.jsx, https://github.com/learn-programmers/prgrms-rct-3/commit/83b8ab40c9977320108118a43574cbcdd4032631)

A. 전체 props 의 데이터입니다.

{component: Component, ...rest} 

이 부분은 객체에서 component 를 제외한 나머지를 rest 라는 이름의 객체에 담아서 사용할수 있게합니다.

즉, DefaultLayout은 브라우저 라우팅과 관련된 matchProps를 컴포넌트에 렌더링으로 업데이트를 해주고, 네비게이션이라는 공통 컴포넌트를 가짐으로서 하나의 레이아웃을 제공하는 기능을 합니다.

---

Q. 댓글창 열림 유지 (Keep the comment form open)
댓글 아이콘 클릭시 토글되는 기능을 추가한 상태입니다.
그런데 댓글을 submit 하면
i added the ability to toggle when the comment icon is clicked.
But if i submit a comment...

아래 캡처와 같이 댓글창이 닫혀버립니다.
The comment form will close as shown in the screenshot below.

댓글 열림 닫힘 상태값이 왜 댓글 submit시 초기화(false)가 되는지 궁금합니다.

I am curious why the comment-open&closed-status value is initialized (false) when submitting a comment.

(Related files => https://github.com/learn-programmers/prgrms-rct-3/commit/998af92e56520d2afb781ddb57db5077788ef051)

A. submit 을 하게되면 상위 컴포넌트에 데이터를 전달하고 상위컴포넌트에서는 하위컴포넌트에 내려주는 데이터(posts)를 바꾸게 됩니다. 그러면 하위컴포넌트는 새로운 데이터를 가지고 새로 렌더링을 시작하고 commentFormOpened 가 false 로 설정되어있기 때문에 닫게 됩니다.

---

Q. 리액트에서 onClick 이벤트 함수를 연결할 때 첫번째 빨간줄과 두번째 빨간줄의 차이가 궁금합니다! 함수의 매개변수 유무에 따라 다르게 기재하는 건가요?

A. 첫번째꺼는 렌더링 시점에 함수를 인라인 형식으로 생성하면서 props로 내려준거고, 두번째꺼는 해당 컴포넌트에 있는 method의 레퍼런스를 내려준 형태입니다.
인라인 형식으로 내려줄 경우 매번 렌더링때마다 새로운 함수가 생성되기때문에 props로 내려가는 레퍼런스가 렌더링때마다 바뀌게되어서 불필요한 re rendering이 일어나게 되어서 피하는 패턴중에 하나입니다.