React Boot Camp 5일차

서론

• 오늘은 리액트의 기본에 집중해서 진행 해 볼 것입니다.

• 이현섭님!

  • GDG Korea WebTech Organizer
  • Toss Web FE

컴포넌트를 잘 만드는 것, 왜 중요할까요?

• 컴포넌트를 잘 만드는것이 중요하다.
• 리액트는 뷰 라이브러리이고 뷰의 단위가 컴포넌트

잘 만든 리액트 앱이란

• 작고 단단한 컴포넌트를 만들고
• 이렇게 만들어진 컴포넌트를 유기적으로 연결한 것
• 원칙을 세우고 원칙을 잘 지키며 개발하는것이 숙련된 개발자가 되는길 이다.

컴포넌트란 무엇인가?

• 컴포넌트는 자바스크립트 함수이다.

강의에서 다룰 것들

• state를 분리하고 컴포넌트를 추상화 하기
• React.memo와 PureComponent
• Controlled / Uncontrolled 컴포넌트
• Functional Component with Hooks
• Portal Component
• Component Composition
• HOC는 훅스가 도입 된 후 거의 대체가 가능하기 때문에 사용하지 않는것을 권한다

PureComponent

• 퓨어컴포넌트는 상태를 비교하는 로직이 있기 때문에 오히려 비교하는 로직이 없는 컴포넌트에 비해 느릴 수 있다.
• 이벤트 핸들러를 인라인 함수로 작성하기 인라인함수로 작성하게 되면 매번 새로운 함수를 생성하기 때문에 최적하가 안된다. 인라인으로 오브젝트를 주는 경우 또한 마찬가지 이다.

Recap

• Uncontrolled 컴포넌트는 사용자가 상태를 제어하지 않는 컴포넌트다.
• Uncontrolled 컴포넌트는 key Props를 이용해 초기화 할 수 있다.
• Controlled 컴포넌트는 사용자가 상태를 제어할 수 있는 컴포넌트다.
• PureComponent를 이용해 render를 최적화 할 수 있다.
• PureComponent를 잘못 사용하면 일반 컴포넌트보다 성능이 나쁘다.

포탈 컴포넌트

• 문제점 상위에서 트랜스폼 쓰고 하위트리에서 fixed 속성을 쓰면 문제가 생김
• 그 외 position: absolute, Stacking Context등 문제가 생긴다.

Component Composition

• Atomic Design ⇒ Templating 개념이 있다.
• 컴포넌트 컴포지션을 하게 되면 퓨어컴포넌트이여도 매번 재생성한 컴포넌트가 들어오기때문에 최적화가 되어지지 않는다.
• 프롭스로 컴포넌트를 받는 컴포넌트는 Pure로 하지 않는것을 권장한다.
• 그러면은 항상 다시 렌더가 일어나야되는 컴포넌트냐? 그렇지 않다 어떻게 막냐 ⇒ parent에 새로운컴포넌트를 만들어 걔를 Pure로한다. specialization방식이라 함

Functional Component

• 컴포넌트는 근본적으로 함수다.
• 자바스크립트 함수를 선언하는 두가지 방식이 있는데 function Input() {} 을 선호한다 리액트 공식문서에서 이방식을 많이 사용하기 때문에

Hooks

• useCallback 두번재 인자는 디펜던시 리스트를 나타냄 디펜던시리스트가 추가되면 값이바뀔때마다 디펜던시에의 해 함수바디가 업데이트가 된다. 그렇기 때문에 의존하는 값이 있는 경우 두번째 인자에 리스트 를 넘겨주어야함 매 값이 바뀔때마 새로운 함수를 디펜던시에 의해 업데이트된 새로운 함수를 넘겨준다.
• 디펜던시리스트를 안넘기면 매번 새로운 함수를 생성해 준다. useCallback을 사용하지 않는것과 같다.
• 컴포지션으로 컴포넌트를 프롭으로내려주게되면 렌더링 최적화가 되지 않는다 이 경우 useMemo를 이용해 최적화를 할 수 있다.
• 유즈메모와 콜백은 거의 비슷하나 메모의 경우 리턴값을 어딘가에 저장해둔다.
• useRef는 createRef를 대체하는 함수 이자 다른 용도로도 사용 가능하다.
• useRef는 함수바깥에 값을 저장한다. 클래스 프로퍼티에 대응되는 기능이 될 수 있다. 유즈스테이트와의 차이는 값이 변경되더라도 리렌더링이 발생되지 않는다.
• useEffect 첫번째는 콜백 두번째는 디펜던시 디펜던시가 빈배열이면 그냥 한번만 실행된다.
• componentWillUnMount대체 Cleanup이라 함 정리하는 콜백 API를 제공한다.
• 커스텀훅을 이용해 로직을 재사용하고 HOC패턴을 대체 할 수 있다.

• eslint-react-hooks

  • hooks하면서 rule지키기 위해 사용
• useReducer 공부해놓길 추천합니다!

질문

• Z index와 무관하게 html 돔트리에서 부모자식관계에서 밀리면 적용이 안되는 경우가 있다.

• 리액트 학습 어떻게 하셨나요?

  • 리액트를 공부해야겠다고하고 공부한적은 없고 실무에서 사용하면서 익혔다.
  • 실무에서 사용하면서 필요한 기능이 있을때 마다 찾아서 사용했다.

• IE버전 몇까지 지원해보셨나요?

  • 토스는 IE지원해본적없다. 안드로이드 4.4이상 지원해야됨
  • IE지원하고자 리액트단에서 무엇을 하기보단 폴리필과 컴파일지원하는 쪽으로 작업하였다.
  • 브라우저 통계치를 보면서 설득하는수밖에 없지 않나…

• 실제로 성능측정 자체는 라이트하우스에서 한다던지한다. 리액트단에서 할수 있는 노력은 퓨어컴포넌트를 제때제때 잘 사용하는정도면 쓸데없는 계산과 메모리 방지를 하면된다. 퓨어컴포넌트, 메모

  • 실제로 성능측정 자체는 라이트하우스에서 한다던지한다. 리액트단에서 할수 있는 노력은 퓨어컴포넌트를 제때제때 잘 사용하는정도면 쓸데없는 계산과 메모리 방지를 하면된다.
  • 메모에도 비교 로직을 사용할 수 있다.

• 저는 더이상 컨테이너 컴포넌트를쓰지않아요

  • Dan의 twit을 보면 프레젠테이셔널 컴포넌트, 컨테이너 컴포넌트 이 방법론을 더이상 추천하지 않는다.
  • 컨테이너 컴포넌트가 있으면 좋은것 같다 그렇게 하면 프레젠테이셔널 컴포넌트에서는 보여줄것에만 집중할 수 있기때문에 더 좋은것 같다.
  • 만약 컨테이너 컴포넌트를 만든다면 굳이 클래스안쓰고 훅스써서 만들면된다.

• 프로젝트 폴더구조 어떻게 고려하시는지

  • 저는 그때그때 다르게 가져간다.
  • 프로젝트 도메인에 따라서도 달라질 수 있다.
  • 예를 들어 간단한 페이지에는 굳이 스트럭쳐를 나눌필요없자나요
  • 좀 큰 프로젝트 할 경우 나눈다.

• 새로운 기술이 나왔을 때 얼마나 빠르게 적용하냐?

  • 레거시를 유지보수 할 경우엔 잘 반영하지 않는다.
  • 한번에 대단위로 마이그레이션 하진 못하고 부분부분만 한다.
  • 새로운 서비스를 개발 하게 될 경우 고려하여 하다.

• redux-form

  • redux-form 추천 안해요 별로인거같아요
  • formik 추천

후기

• 리액트의 최신 경향에 대해 자세히 알게 된 좋은 시간이 었다. 훅스의 등장으로 HOC는 더이상 권장되지 않을 것이라니 정말 빠르게 변화하는 것 같다.