27일

3/27

경험

컴포넌트 스타일 확장 시 className

컴포넌트 스타일 확장 시 반드시 확장하는 컴포넌트 속성에 className을 설정해야 작동한다.

엔티티 코드는 세미콜론 필수!

부끄러운 실수를 했다. 줄 바꿈 없는 공백( ) 적용하려는데 제대로 작동이 되지 않아 왜 그런가 했더니 마지막 세미콜론을 넣지 않았다. 조심조심 또 조심!

컴포넌트 설계는 여전히 어렵다.

Definition 컴포넌트 설계 시 "질문이 있으신가요?"라는 부분도 컴포넌트에 포함할 것인지 고민을 했다. 물론 포함을 해보는 것으로 시도는 해보았으나 결국 포함하지 않는 것으로 마무리했다.

• Definition 컴포넌트는 정의, 설명 역할이다. 그 이외의 기능을 하는 markup이 들어오면 기능은 단순해지지 않는다.

• 두 콘텐츠는 형제 요소로 마크업 설정이 되어 있는데 이를 스타일링 하기 위해서 2가지 방법을 사용해야 한다.

  • 클래스 네임 사용하기, 이는 스타일드 컴포넌트가 자동으로 해시값을 설정해주는데 꼭 임의로 설정할 필요를 못느낀다.

  • 래퍼 요소(div)사용, 이는 의미 없는 요소를 생성하여 시멘틱 하지 못한 마크업이 된다.

문제 및 의문

props type error (미해결)

에러 발생. isValidEmail(inputValue)의 결과는 true가 나왔지만 아래 오류가 떠서 invalid="true"가 된다.

index.js:1 Warning: Failed prop type: Invalid prop invalid of type string supplied to Input, expected boolean.

if (!isValidEmail(inputValue)) { 
    setInputAttr({ invalid: invalid="true" }) 
} else {
} 

가져오려는 모듈의 이름을 확인하자

if (!passwordRegEx(inputValue)) {}   [X] 
if (!isValidPassword(inputValue)) {} [O] 

useEffect 사용의 적절함

• Promotion 컴포넌트 작업 중 Input 컴포넌트의 value를 가져오려는 작업을 하려는데 몇 가지 드는 의문

  • 클래스 컴포넌트의 setState()의 두번째 인자인 callback()함수 기능을 사용하고 싶어서 함수 컴포넌트에서 useEffet()를 사용한 건데 적절한 사용인지?

  • 종속성 배열설정 시 value 하나만 설정하면 경고가 뜨는데 왜 이벤트 함수까지 설정해야 하는 건지? 변경을 감지할 필요가 있는 것은 value뿐인데?

useEffect(() => {
    onInputComplete(value)
    return () => {
      onInputComplete()
    }
  }, [onInputComplete, value])