[리뷰 요청] 2주차 1번 과제

[ctaaag]

안녕하세요 2주차 1번 과제 리뷰 요청드립니다 :)

지난 번 시간에 피드백 받았었던 사항들을 신경써보면서 코드를 짜봤습니다..!!

[내용]

• 처음에는 counter, setCounter를 props로 넘겨서 각각의 onClick에 각각 할당했다가
  함수의 number를 받아서 조작하는 공통점이 있었기에 onClick에 들어가는 함수 로직을 분리했습니다.

• 함수의 인자를 넘길 때는 함수의 의도가 개입하지 않게 number라는 인자명을 사용했습니다.
  함수명은 handler+이벤트의 형태로 작명했습니다.

• app, index, component를 각각 폴더로 분류했습니다.

[질문]

1. 바람직한 컴포넌트의 작명 기준

ClickMe 컴포넌트와 Button 컴포넌트명을 지을 때 고민이 되었던 사항이 있습니다.
저는 핵심적인 정체성이 잘 드러나면 될 것 같아서 ClickMe는 굳이 Button이라고 명시하지 않았습니다.
둘 다 버튼을 누르면 조작되고 보여지는 컴포넌트라는 특성이 있지만,
다른 역할을 할 때 컴포넌트 이름을 어떻게 지으면 좀 더 직관적이게 될지 고민입니다.

2. 린트에러

위와 같이 파일을 import할 때 해당 에러가 발생됩니다.
Casing of ./components/Button.jsx does not match the underlying filesystem.

microsoft/vscode-eslint#1130

위의 링크에서 파일명을 변경했을 때 대문자,소문자 구분을 vscode가 못하는 문제가 있다고 해서,
vscode 종료 후 다시 실행해봐도 되질 않네요 :(

[hannut91]

1. 바람직한 컴포넌트의 작명 기준

지금 봤을 때 ClickMe만 봐도 버튼이라는 것을 알 수 있어서 Button이라는 말을 붙일 필요가 없다고 느끼신 것 같아요.

이것은 지금 내가 ClickMe가 버튼이라고 알고 있는 사실이 미래에도 지속될거라는 프레임에 갇힌 사고를 하게 되서 그렇습니다. 몇개월뒤에 내가 계속 이 기억을 할 수 있을까요?

또 다른 관점은 다른 사람도 ClickMe만 봐도 알거라는 가정을 가지고 있으셔서 그렇습니다. 팀원들이 공통된 생각을 가지고 있다는 가정은 굉장히 위험한 생각입니다. 저 사람도 당연히 이렇게 생각하겠지라는 생각이 팀의 와해를 불러옵니다. 따라서 저라면 Button이라는 이름을 붙일 것 같습니다.

See also

• https://hannut91.github.io/blogs/books/frame
• https://hannut91.github.io/blogs/books/streetlights-and-shadows

[hannut91]

린트에러

이거는 혹시 .jsx를 붙여서 에러가 난건가요? 아니면 소문자로 파일을 작성했다가 대문자로 변경해서 생긴 문제인가요?

[ctaaag]

1. 컴포넌트명 수정
   NumberButtons, ClickMeButton 이라는 이름으로 수정했습니다 :)

2. 린트에러
   .jsx문제인지 확인하기 위해서 .js로 바꿨는데 동일하게 문제가 발생되어서, 대문자 인식에서 오류가 난 것 아닐까 싶었습니다
   그래서 좀 더 찾아봤는데, 핵심은 import할 때 인식을 못한다는 것이였고. 이를 Eslint rule에 'import/no-unresolved' 해당옵션을 넘겨주니 해결이 되긴 했습니다.
   경로의 파일이 unresolved하는 일이 없도록 하는 옵션이라고 합니다. 근데 이 설정을 off로 하면 실제로 Unresolved되었을 때는 어떻게 해야하나라는 고민지점이 남긴 합니다..!!

참고한 자료 :
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md
https://cocoze.tistory.com/108

[hannut91]

제가 해봤을 때는 확장자를 안썼더니 해결 되었었는데 확장자를 지우는 것도 시도해 보셨나요?

[hannut91]

import ClickMeButton from './components/ClickMeButton';
import NumberButtons from './components/NumberButtons';

이렇게 확장자 없이 작성해 보세요

[ctaaag]

확장자를 지워도 똑같이 문제가 발생합니다!

[ctaaag]

https://baeharam.netlify.app/posts/lint/Lint-ESLint-+-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

"rules": {
  "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
}

eslint-plugin-react 설치 여부를 체크하고 위의 룰을 추가로 기입해주면 해결된다는 사례도 있어서
해봤는데 이 역시도 안되네요 🥺

[hannut91]

handler함수의 이름과 컴포넌트의 속성 이름을 똑같이 맞춰주신 것 같아요.

핸들러 함수에 handle*이라고 이름을 붙이는 이유는 특정 이벤트가 발생했을 때 그 이벤트를 처리하는 함수이기 때문입니다.

function handleClick() {
  alert('버튼이 클릭됐어요!');
}

<Button onClick={handleClick} />

위의 예제를 보면 보면 Click 했을 때 handleClick이 처리한다 라고 읽을 수 있습니다. 그래서 이벤트 처리 함수를 컴포넌트로 전달할 때는 on으로 시작하는 이름으로 전달합니다.

[ctaaag]

핸들러 함수에 handle*이라고 이름을 붙이는 이유는 특정 이벤트가 발생했을 때 그 이벤트를 처리하는 함수라는 맥락은 이해가 되었고, 그래서 on으로 시작하는 이름으로 전달하는 의미도 이해는 되었습니다!

그런데 위의 경우에서 자식요소에서 handleClick이라는 함수를 쓸 때는 아래와 같이 사용하게 될 것 같은데요!

<button onClick={()=>onClick()} ></button>

이렇게 될 경우에는 onClick이라는 것을 onClick으로 전달받은 함수를 실행한다는 의미인데
제가 봤을 때는 onClick을 했을 때 onClick함수를 실행한다는게 오히려 어색한 것 같다는 생각도 들어서요🥲

그럼에도 on으로 시작하는 이름으로 전달해주는 것이다라는 의미를 강조하는 목적이 더 크니 이렇게 쓰는게 더 나은 방식이라고 이해하면 될까요?

[hannut91]

해당 컴포넌트에서 onClick이라는 이름으로 함수를 실행하니 어색하게 느껴질 수 있겠네요. 사용하는 컴포넌트에서 사용하는게 어색하게 느껴지신다면 이름을 바꿔서 사용할 수 있긴 하겠네요.

const ButtonComponent = ({ onClick: handleClick }) => {
  return (
    <button onClick={handleClick}></button>
  );
};

저는 컴포넌트를 쓰는 입장에서 이해하기 좋은 이름이어야 한다는 생각때문에 그랬던 것 같습니다 ㅎㅎ

[ctaaag]

아하! 제안해주신 것도 좋은 방법인것같아요!
역시 이름 짓는 건 참 어려운일이네요 ㅠㅠ
감사합니다 :) ㅎㅎ

[hannut91]

버튼을 클릭했을 때 1씩 증가해서 { number: 1}로 전달하고 있네요. 만약에 1씩 증가하는 것이 아니라 2씩 증가하도록 변경한다면 이 컴포넌트를 변경해줘야겠습니다.

만약 이러한 로직을 외부에서 변경할 수 있도록 하려면 어떻게 해야 할까요

[ctaaag]

<ClickMeButton counterNumber={counterNumber} onClick={handlerClickButton} whatNumberToAdd={1} />

return ( <button type="button" onClick={() => onClick({ number: whatNumberToAdd })}> Click me ({counterNumber}) </button> );

이런식으로 컴포넌트 생성할 때 whatNumberToAdd라는 값도 props로 넘겨주고
실제 click할 때는 해당 props의 값을 넘겨주는 형태로 해봤습니다!
이렇게 되면 자식 컴포넌트에서 들어가는 변수는 하나도 없이 전달받은 값만 보여주고,
모두 부모 컴포넌트에서 핸들링하기 때문에 관심사가 분리된 코드라고 생각합니다! 🙂

[hannut91]

별도의 속성을 넣어서 값을 몇씩 더할지 변경할 수 있겠네요 ㅎㅎ 좋습니다. 저는 핸들러 함수를 외부에서 전달하고 컴포넌트에서는 단순히 실행만 하도록 하는 것을 생각해 보았어요

const handleClickMeButton = () => {
  setCounerNumber(counterNumber + 10);
}

return (
  <ClickMeButton>
    counterNumber={counterNumber}
    onClick={handleClickMeButton}>
  </ClickMeButton>
)

//

export default function ClickMeButton({ counterNumber, onClick }) {
  return (
    <button type="button" onClick={onClick}>
      Click me (
      {counterNumber}
      )
    </button>
  );
}

[ctaaag]

아하! 좋은 것 같아요 :)

저 같은 경우에는 handleClickButton이라는 핸들러함수를 clickmebutton 컴포넌트와 numberbutton에 공통으로 사용되는 함수로 두고 싶었어요!
이유는 둘 다 특정 값을 더해서 뱉어주는 역할을 하기 때문에 굳이 각각의 핸들러 함수를 만들고 싶지 않았습니닷!
그래서 같은 핸들러 함수를 쓰고, 더해주는 값만 사용되는 컴포넌트의 인자로 넣어주면 좋지 않을까 생각해서 사용했습니다ㅎㅎ

피드백해주셔서 감사해요 :)

[hannut91]

속성명을 아주 자세히 작성해 주셨네요. 그러다보니 컴포넌트가 어떤 일을 하는지를 변수명에도 드러났네요. 주어진 값으로 더한다는 사실을 바로 알아서 좋을 수도 있지만 이건 단점이 될수도 있습니다. 우리가 이 컴포넌트에게 맡기는 것은 단순한 값이고 이 값으로 무엇을 할지는 이 컴포넌트만 알고 있어야 합니다. 이게 캡슐화입니다.

조금 억지일수도 있지만 만약 주어진 값을 제곱으로 더하기로 했다고 합시다. 그러면 이 속성의 이름도 바뀌어야 할거예요.

[ctaaag]

감사합니다 :) 덕분에 추상화를 항상 유념하면서 코드를 짜게 되는 것 같아요!
속성명을 number로 변경해서 해당 컴포넌트에서만 명확한 역할을 알게 수정했습니다!