Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ctaaag wants to merge 8 commits into
base: ctaaag
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ce7408
feat: 1차 과제 완료
ctaaag May 10, 2023
25da462
fix: 린트 에러 해결
ctaaag May 10, 2023
7423a20
fix : App, index 파일 분리
ctaaag May 10, 2023
ea12862
fix: components 폴더 생성
ctaaag May 10, 2023
c246ad8
fix:린트에러 및 컴포넌트명 변경
ctaaag May 11, 2023
0168378
fix: 린트에러 해결
ctaaag May 11, 2023
db9870e
fix: 더할 숫자 외부 변수로 주입 및 props로 넘길 핸들러함수명 변경
ctaaag May 13, 2023
a378bf5
fix: number 속성 이름 추상화 반영
ctaaag May 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@ module.exports = {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
extends: ['plugin:react/recommended', 'airbnb'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
],
plugins: ['react'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
Expand Down Expand Up @@ -45,8 +40,9 @@ module.exports = {
'object-curly-spacing': ['error', 'always'],
'key-spacing': ['error', { mode: 'strict' }],
'arrow-spacing': ['error', { before: true, after: true }],

'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'import/extensions': 'off',
'import/no-unresolved': 'off',
},
};
23 changes: 23 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React, { useState } from 'react';
import ClickMeButton from './components/ClickMeButton.jsx';
import NumberButtons from './components/NumberButtons.jsx';
Copy link
Copy Markdown
Contributor

@hannut91 hannut91 May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

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

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

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크린샷 2023-05-12 오후 7 00 47 확장자를 지워도 똑같이 문제가 발생합니다!

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


export default function App() {
const [counterNumber, setCounterNumber] = useState(0);

function handlerClickButton({ number }) {
setCounterNumber(counterNumber + number);
}

return (
<div>
<p>Counter</p>
<ClickMeButton
counterNumber={counterNumber}
handlerClickButton={handlerClickButton}
Copy link
Copy Markdown
Contributor

@hannut91 hannut91 May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

<Button onClick={handleClick} />

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

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

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

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

Copy link
Copy Markdown
Contributor

@hannut91 hannut91 May 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

/>
<br />
<NumberButtons handlerClickButton={handlerClickButton} />
</div>
);
}
11 changes: 11 additions & 0 deletions src/components/ClickMeButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

export default function ClickMeButton({ counterNumber, handlerClickButton }) {
return (
<button type="button" onClick={() => handlerClickButton({ number: 1 })}>
Click me (
{counterNumber}
)
</button>
);
}
Copy link
Copy Markdown
Contributor

@hannut91 hannut91 May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

Copy link
Copy Markdown
Contributor

@hannut91 hannut91 May 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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>
  );
}

Copy link
Copy Markdown
Author

@ctaaag ctaaag May 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하! 좋은 것 같아요 :)

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

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

9 changes: 9 additions & 0 deletions src/components/NumberButtons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

export default function NumberButtons({ handlerClickButton }) {
return [1, 2, 3, 4, 5].map((i) => (
<button type="button" onClick={() => handlerClickButton({ number: i })}>
{i}
</button>
));
}
5 changes: 5 additions & 0 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));