#1주차 - Mission1 프로젝트 구성, 컴포넌트 쪼개기, css-in-js 형태로 styled-jsx를 사용하기, Post 등록과 조회기능 구현

sykim·2020년 4월 3일
React
0

페이스북 클론 만들기 스터디

목록 보기
2/7

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

1. 프로젝트 구성

parcel를 이용하여 리액트 프로젝트를 만들어 보세요.
프로젝트 구성시 eslint, babel, prettier, editorConfig를 설정해주세요.

Mission1 review

  1. parcel을 이용해 리액트 세팅 완료
    웹팩과 비교했을 때 세팅할 거리가 적다는 건 느꼈지만 eslint 설정을 처음 해봐서인지 설정 부분에서 많이 버벅거렸습니다.
    세팅에 참고했던 링크 : https://developer-alle.tistory.com/300

  2. 컴포넌트 쪼개기 완료
    스터디 전의 저는 pages 폴더에는 pages에 해당하는 대표 페이지.js가 들어가고 컴포넌트(단위)와 관련된 파일들은 전부 components 폴더에 페이지를 기준으로 그룹핑해서 넣었는데 이 방식보다 스터디에서 배운 구조가 훨씬 직관적이고 파일을 찾기도 편했습니다.

  3. css-in-js 형태로 styled-jsx를 사용 완료
    styled-component와 비교했을 때 좋은 점은 네이밍을 생각하지 않고 css를 그대로 붙일 수 있어 편했다는 점입니다.

  4. Post 등록과 조회기능 완료

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. style-jsx global correct usage

Q1-1. navbar가 부모 클래스이고 fa-facebook-square가 자식 클래스입니다.
이 코드에서 스타일이 적용되는 걸 보면 styled-jsx의 passing style to "child class"는 가능하다고 해석해도 되나요?
(eng)
'navbar' is the parent class and 'fa-facebook-square' is the child class. and this style code was applied well.
Can I understand passing style to "child class" as possible in styled-jsx?

(issue code file -> /src/components/Logo.jsx)

Q1-2. nav-item이 부모 클래스이고 prop으로 내려진 img 태그가 자식 클래스입니다. 이 코드는 캡처본과 같이 :global(.nav-link > img)처럼 global을 사용하지 않으면 자식 클래스 스타일이 적용이 되지 않습니다.
이 말은 즉, styled-jsx는 passing style to "child component"가 불가능해서인가요?

(eng)
The nav-item is the parent class, and the img tag proped down is the child class.
If global is not used, the child class style is not applied.
Does this mean that styled-jsx cannot pass style to "child component"?

(issue code file -> /src/components/Navigation/NaviItem.jsx)

리뷰 답변

A.1-2: You should use global in that case or use className to pass down the styles.

Q1-3. style jsx global의 기재 방식

1. 
<style jsx global>
.nav-link > img {...}
</style>

2. 
<style jsx>
:global(.nav-link > img) {...}
</style>

1,2번은 같은 코드 방식인 건가요?
(eng)
Is 1,2 the same code method?

리뷰 답변 1

A. 1-3: 1 & 2 are slightly different depends on your needs. The usage of global() is one-off and can be applied to particular css selectors. However, <style jsx global /> will make the entire style global which means you can't control which css selectors should be global or which should not be. Kindly read the examples in the docs for reference.

리뷰 답변 2

A. Q1 서브 질문들은 한번에 답을 드릴 수 있을 것 같네요. styled-jsx 가 어떻게 css를 DOM object에 반영하는지를 확인해보시면 궁금증이 쉽게 해결 될 것 같네요. 크롬개발자도구로 해당 스타일들이 어떻게 반영됐는지 확인해보세요.

답을 미리 알려드리면 styled-jsx는 해당 컴포넌트에서 정의한 내용은 해당 컴포넌트에 보이는 지정자들만 반영합니다. 아마 개발자 도구로 보시면 jsx-[랜덤숫자]의 class가 추가 된 것을 볼 수 있을 겁니다. 같은 컴포넌트에서 정의한 DOM Element들은 같은 class 를 가지고 있는 것도 확인할 수 있구요.

그러면 .nav-link 와 img 가 다른 컴포넌트에 있어서 반영이 안되겠네요.

추가로 global로 정의한 스타일 내용은 프로젝트 전체에 반영됩니다.

Q2. logo

로고 컴포넌트를 굳이 따로 뺀 이유는 뭔가요?
(eng)
Why did you separate the logo components?

리뷰 답변

A. 2: There is no always right or wrong. We leave it out because we think does not belong to any other members and it might be reused elsewhere so we split it out to follow SOC (separate of concern).

Q3. uncontrolled 컴포넌트의 상태값이 필요한 경우
(When you need the state value of an uncontrolled component)

상태값이 지정이 안 된 textarea의 state가 필요한 경우 (예를 들어 포스트 입력후 textarea를 비워주고 싶다),
createRef로 접근해서 value를 비워주는 것 말고 혹시 다른 방법도 있을까요?
(eng)
If you need a textarea state for which the state value is not specified, is there any way other than createRef?

(issue code file -> /src/pages/Home/PostForm.jsx)

A. 3: You can use local state.

const [value, setValue] = useState('')

const handleClearTextArea = useCallback(() => setValue(''), []) // invoke this when your programme want to cleat `<textarea />` 

const handleTextAreaChange = useCallback(val => setValue(val), [])

<textarea
  ...
  onChange={handleTextAreaChange}
/>

코드 리뷰 받은 부분

  1. 프론트엔드에서 css 적용시 px은 권장하지 않는다.
    rem 은 루트 html 요소의 글꼴 크기를 기준으로 설정합니다. 때문에 루트 글꼴 크기를 수정하는 것만으로 전체 프로젝트를 빠르게 적용할 수 있습니다.

(리뷰 글)
This is not wrong. However, there is a common trick in real world front-end is to set font-size: 10px; and use rem unit elsewhere so 1rem will be equals to 10px which makes calculation easier while making you to enjoy the benefits of using rem unit.

If you would like to learn more about it, you can check it out: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

  1. uncontrolled 컴포넌트보다는 local state나 onChange props를 이용하는 것이 더 낫다.
    controlled component는 리액트 컴포넌트를 기반합니다. 반면에 ref를 사용하는 경우 html dom을 사용합니다. 후자의 경우 (특히 함수형 컴포넌트에서는) 불필요한 버그를 발생시킬 수 있습니다.
    왜냐면 useEffect가 비동기로 동작하기 때문입니다. componentDidMount와 componentDidUpdate와 다르게, useEffect에 전달된 함수는 레이아웃 및 페인트가 끝난 후 실행이 됩니다.

(리뷰 글)
As we discussed in the previous conversation, using Local State and onChange props is better than using uncontrolled component.

As explained in the official docs:

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

React implements sth. called virtual DOM to manipulate the actual HTML DOM. A controlled component is built upon React Component so it's on virtual DOM which makes everything easy (most of the time). Using ref for forms is using HTML DOM which could lead to bugs and unnecessary problems, particularly in Functional Components.

Why? (Good to know only, not mandatory to know) because useEffect() in Functional Component is asynchronous.

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event.

Want to master it? Read https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n

profile
sykim
블로그 이전했습니다
이전 포스트

에러 모음

다음 포스트

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

0개의 댓글