첫 시작인 월요일이다! 오늘도 회고조 조원분 덕에 수월하게 복습할 수 있어서 감사했다 :3
1.1. 조건부 렌더링
- JS 객체 합성의 함정에 유의하기 (스타일 확장: className, style, restProps)
- 클래스, 스타일, 그리고 남은 객체를 합성하는 방법에 대하여 공부했다.
- skip to Content(Links): focusable 상태일 때 볼 수 있다. (평소에는 눈에 보이지 않는다.)
1.2. className
${classes.demo} ${className}
모듈에서 불러온 스타일 클래스와 클래스를 합칠 때 사용한다. .trim()은 앞뒤 공백을 자를 때 사용한다. 특히 합칠 때 클래스 사이의 공백을 잊지 말자.
1.3. style
- 스타일을 합칠 때에는 언제나 default styles를 먼저 쓰고, 그 이후에 custom styles를 작성한다. 컴포넌트 개발자가 설정한 기본 스타일 객체 이후에 컴포넌트 사용자가 설정한 스타일 객체를 작성해야 한다.
- 위 이미지처럼
filter: blur(4px)이 두 스타일 둘다 겹칠 경우 사용자가 설정한 스타일 객체가 뒤에서 나와야 무사히 상속되기 때문에 뒤에 써주어야 한다. - 순서를 꼭 기억하자!
1.4. restProps
- 단어 그대로 남은 객체들을 가져오기 위해서 사용한다. 가져온 classNames, styles, 그리고 남은 객체들을 선언하기 위해서 가져온다.
2.1. StoryBook
-
짧게 어떻게 사용하는지와 중요성을 강조하고 넘어가셨다. 실제로 기능을 보여줄 때 사용하기 좋을 것 같다. 여유가 있을 때 자세히 문서를 살펴보면 좋을 듯 하다. 과거에 룩북을 설명해주신 적이 있는데 상당히 유사하다.
-
Storybook이란?
UI 컴포넌트와 해당 스토리의 대화형 디렉토리입니다. Storybook을 사용하면 불필요한 모든 단계를 건너뛰고, 특정 상태의 UI 컴포넌트를 바로 확인하고 테스트 할 수 있습니다.
3.1. 이벤트 핸들링
3.2. HTML VS JSX
- HTML 속성 이름이 모두 소문자 (onclick) vs. JSX는 on* 시작하는 camelCase 포멧 (onClick)
- HTML 속성 값은 문자(="print()") vs. JSX는 이벤트 prop 값은 이벤트 핸들러(함수) 참조(={print})
- 이벤트 전파 중지(stop propagation: e.stopPropagation())
- 이벤트 전파 중지로 두 버튼 중 하나를 클릭하더라도 div에 연결된 이벤트 핸들러가 실행되지 않는다. 직접 div 요소를 클릭했을 때만 연결된 이벤트 핸들러가 실행된다.
3.3. 이벤트 핸들러에 인수 지정
- (JS, Closure: (payload) => (e) => {})
4.1. 상태 관리
- 상태란: 시간에 따라 변하는 값
- 재조정이란? 무언가 변경되었는지 확인하고 다시 그림
- 다음 시간에 더 자세히
