컴포넌트 제대로 만들기
•
2 likes•33,274 views
2019년 5월 27일 "Innovation Lab Korea from Facebook"에서 열렸던 “React 사용자를 위한 리액트 부트캠프“의 5일차 강의자료입니다.
Recommended
More Related Content
Similar to 컴포넌트 제대로 만들기
Similar to 컴포넌트 제대로 만들기 (20)
More from HyunSeob Lee
컴포넌트 제대로 만들기
- 2. 반갑습니다, 이현섭입니다. • GDGKoreaWebTechOrganizer • TossFrontendDeveloper • 웹개발4년 • hyunseob.github.io
- 3. 컴포넌트를 잘 만드는 것, 왜 중요할까요?
- 4. 컴포넌트는 리액트 앱에서 가장 중요한 구성요소입니다.
- 5. 잘 만든 리액트 앱이란, • 작고단단한컴포넌트를만들고 • 이렇게만들어진컴포넌트를유기적으로연결한것
- 6. 잘 만든 리액트 앱이란, • 작고단단한컴포넌트를만들고 • 이렇게만들어진컴포넌트를유기적으로연결한것
- 7. 컴포넌트란 무엇일까요?
- 8. 이 강의에서 다룰 것들: • State를분리하고컴포넌트를추상화하기 • React.memo와PureComponent • Controlled/Uncontrolled컴포넌트 • FunctionalComponentwithHooks • PortalComponent • ComponentComposition
- 9. 이 강의에서 다루지 않을 것들: • HigherOrderComponent(HOCs) • 스타일링기법(CSSModules,CSS-in-JS) • StateManagement(Redux,MobX)
- 10. HOC는 왜 다루지 않나요? • HooksAPI • HOC는더이상좋은접근법이아닙니다. • “MakingSenseofReactHooks”byDanAbramov
- 11. 코딩 전 잠깐! • StackBlitz에가입해주세요.(GitHub로그인가능) • 가급적모든코드를실습해보세요. • 주위에못따라오는분이있다면도와주세요. • 못쫓아오더라도제가미리짜둔코드가제공됩니다.
- 12. Let’s code: Form • StackBlitz
- 13. Let’s code: Form • State없음 • render초기1회만실행 • 만약Reset이필요하다면?
- 14. Let’s code: Form with State • email과password를State로가져와제어하기 • “초기화”버튼만들어보기 • StackBlitz
- 15. Uncontrolled / Controlled • 첫번째예제가Uncontrolled,두번째예제가Controlled • 상태를“제어”하지않기때문에Uncontrolled라고부름 • 근본적으로Uncontrolled보다는Controlled추천
- 16. Let’s code: <Input/> • <Input/>컴포넌트만들기 • type,placeholder,value,onChange를Props로넘겨받음 • render횟수측정하기 • StackBlitz
- 17. Optimize: Uncontrolled • 전의코드에서Fork • <Input/>에서valueprops를받지않도록만들기 • <Input/>내부State를이용해render,onChange구현하기 • render횟수측정하기 • StackBlitz
- 18. Let’s code: Reset with key • keyprop을이용해“초기화”동작하게만들기 • StackBlitz • fullyuncontrolledcomponentwithakey
- 19. Optimize: PureComponent • 아까Fork하기전으로돌아가서(ControlledComponent) • <Input/>을PureComponent로고치기 • render횟수측정하기 • StackBlitz
- 20. Optimize: PureComponent • 아까Fork하기전으로돌아가서(ControlledComponent) • <Input/>을PureComponent로고치기 • render횟수측정하기 • StackBlitz
- 21. PureComponent Bad Practice • 이벤트핸들러들을인라인함수로고치기 • render횟수측정하기 • StackBlitz
- 22. PureComponent Bad Practice • 이벤트핸들러들을인라인함수로고치기 • render횟수측정하기 • StackBlitz
- 23. PureComponent Bad Practice • 이벤트핸들러들을인라인함수로고치기 • render횟수측정하기 • StackBlitz
- 24. Recap • Uncontrolled컴포넌트는사용자가상태를제어하지않는컴포넌트다. • Uncontrolled컴포넌트는keyProps를이용해초기화할수있다. • Controlled컴포넌트는사용자가상태를제어할수있는컴포넌트다. • PureComponent를이용해render를최적화할수있다. • PureComponent를잘못사용하면일반컴포넌트보다성능이나쁘다.
- 25. The React Render Tree <App/> <Parent/><Parent/> <Child/> <Child/> <Child/> <Child/>
- 26. The DOM Tree <div/> <div/><div/> <div/> <div/> <div/> <div/>
- 27. The Problem • StackBlitz • position:fixed가모두해결하지못한다. • 그외position:absolute,StackingContext때문에문제가생긴다.
- 28. Portal Component • index.html파일에Dialogcontainer만들기 • Dialog를PortalComponent로만들기 • StackBlitz • 논리적으로는하위컴포넌트,시각적으로는상위에위치
- 29. Component Composition • React모듈의단위는컴포넌트 • 합성(Composition)은컴포넌트를재사용하기위한강력한방법 • CompositionvsInheritance
- 30. Composition: children • Dialog컴포넌트를childrenProps를받도록변경하기 • Dialogchildren으로이것저것넘겨보기 • StackBlitz
- 31. Composition: Templating • Dialog컴포넌트Props에서children을제거하기 • Dialog컴포넌트에header,body,footerProps추가하기 • 그사이사이에<hr/>로구분해보기 • 만든Props에이것저것넘겨보기 • StackBlitz
- 32. Composition: PureComponent • 부모에<input/>만들고Statebinding하기 • Dialog를PureComponent로고쳐보기 • <input/>에타이핑하면서render횟수측정하기 • StackBlitz
- 33. Composition: PureComponent • 부모에<input/>만들고Statebinding하기 • Dialog를PureComponent로고쳐보기 • <input/>에타이핑하면서render횟수측정하기 • StackBlitz
- 34. Optimize: Composition • 클래스프로퍼티로header,body,footer로넘길컴포넌트옮기기 • <input/>에타이핑하면서render횟수측정하기 • StackBlitz
- 35. Composition: Specialization • WelcomeDialog.js파일생성하기 • header,body,footerWelcomeDialog로옮기기 • WelcomeDialog를PureComponent로만들기 • Dialog의render횟수측정하기 • StackBlitz
- 36. Recap • PortalComponent는논리적으로하위지만시각적으로는상위에 위치해야할때사용한다. • React에서는“합성”을통해컴포넌트를재사용한다. • 합성을지원하는컴포넌트의경우PureComponent가성능이더 나쁠수있다. • 합성을지원하는컴포넌트의성능최적화를위해“Specialization” 할수있다.
- 37. Functional Component • 컴포넌트는“근본적으로”함수다. • 컴포넌트는함수로도작성할수있다. • React16.8버전부터는Hooks가추가되어함수형컴포넌트만 사용해서앱을구성할수있다. • Input을함수형컴포넌트로바꾸기 • Input을React.memo로감싸기 • StackBlitz
- 38. Hooks: useState • JoinForm에서render만남기고다지우기 • JoinForm을함수형컴포넌트로바꾸기 • useState를사용해서상태를렌더링하기 • onChange에는인라인함수를넘기기 • StackBlitz
- 39. Hooks: useCallback • useCallback을이용해 onChange이벤트핸들러만들기 • handleSubmit만들기 • handleReset만들기 • StackBlitz
- 40. Hooks: useMemo • Input컴포넌트에서render횟수측정하기 • Input에accessory라는composition용Props추가하기 • accessory에동적으로버튼렌더하기 (value가빈값이아닐때만보이도록) • useMemo로accessory만들어넘겨주기 • StackBlitz
- 41. Hooks: useRef • Input컴포넌트에서useRef를통해DOM객체얻어오기 • StackBlitz
- 42. Hooks: useEffect • useEffect를통해Input이마운트되었을때자동으로focus가게하기 • Input에autoFocus라는Props를추가해이값이true일때만 focus가게하기 • StackBlitz
- 43. Hooks: Cleanup • autoFocus로직모두지우기 • email값이“abcd”일때만Input을렌더링하도록변경하기 • Input에useEffecthook안의return문에함수를만들어넘겨주기 • 그함수안에서로그찍어보기 • StackBlitz
- 44. Hooks: Custom hook • useState를통해State를생성하고, • useCallback을통해onChange이벤트를핸들링하는Hook만들기 • 이렇게만들어진Hook을합치기 • StackBlitz
- 45. Hooks: Custom hook(2) • window가resize될때마다State가변하는Hook만들기 • 그hook을컴포넌트에서사용해서로그출력하기 • StackBlitz
- 46. Rules of Hooks • Hook은항상컴포넌트의TopLevelScope에서호출되어야함 • 즉,Hook을if문,for문,콜백안에서사용하면안됨 • render호출시마다항상같은순서로hook을호출해야하기때문 • Hook을React함수(함수형컴포넌트,Customhook)이아닌 다른곳에서호출해서는안됨 • ESLint
- 47. Rules of Hooks • Hook은항상컴포넌트의TopLevelScope에서호출되어야함 • 즉,Hook을if문,for문,콜백안에서사용하면안됨 • render호출시마다항상같은순서로hook을호출해야하기때문 • Hook을React함수(함수형컴포넌트,Customhook)이아닌 다른곳에서호출해서는안됨 • ESLint
- 48. Recap • Hook으로거의모든컴포넌트를클래스없이구현할수있다. • React.memo는함수형컴포넌트의PureComponent다. • useState로함수형컴포넌트의State를만들수있다. • useCallback,useMemo를통해렌더링최적화를할수있다. • useRef는렌더링에영향을미치지않는값을보관할용도로사용한다. • useEffect는클래스컴포넌트의Lifecyclehook과유사하다. • 이미나와있는 Hook을통해서직접Hook을만들수있다. • 이렇게만든Hook은로직을추상화하고,재사용하는데유리하다.