2주차-1 과제. 간단한 카운터앱 만들고 파일 분리하기 #154
Conversation
src/Button.jsx
Outdated
| function Button({ value, onClick }) { | ||
| return ( | ||
| <button onClick={onClick} type="button">{value}</button> | ||
| ); | ||
| } |
There was a problem hiding this comment.
function Button({ children, onClick }) {
return (
<button type="button" onClick={onClick}>
{children}
</button>
);
}이런식으로 변경해주시면 버튼 컴포넌트를 범용으로 사용하실 수 있어요!
There was a problem hiding this comment.
수정했습니다!!
선생님 다른분한테는 children 이라는 단어대신 상황에맞는 명시적인 단어를 권유하시던데 저는 컴포넌트 파일을 따로 분리했기때문에 children 이라는 단어가 어울리는 이유가 맞나요?
There was a problem hiding this comment.
다른분이랑 다른 피드백을 드린 이유는 두분의 컴포넌트가 달라서 이기 때문이예요.
alstjr0183님은 저 분보다 좀더 범용적으로 쓰일 수 있는 Button 컴포넌트를 만드셨기 때문이죠!
src/Button.jsx
Outdated
| ); | ||
| } | ||
|
|
||
| export default Button; |
There was a problem hiding this comment.
특별히 export default 따로 써주신 이유 있으신가요? ㅎㅎ
저는 function이 여러개 있을 때, 이 function은 컴포넌트를 드러내는 function 이다라는 것을 드러내기 위해 아래 형태로 작성하는 편이거든요!
export default function Button() {}There was a problem hiding this comment.
오호 그러네요 하나일경우에는 export default로 바로 적어주는게 좋은거같습니다!
src/Button.jsx
Outdated
| @@ -0,0 +1,9 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
리액트17 버전 이후부터는 생략이 가능해요!
사용하시는 리액트 버전을 확인하신 후 적용해보시면 좋을 것 같아요.
There was a problem hiding this comment.
선생님 react 버전이 17이상인데 import 를 뺐더니 Uncaught ReferenceError: React is not defined 에러가 나더라구요..! 따로 설정이 필요한 부분인가요?
There was a problem hiding this comment.
구글링 해서 babel.config.js 쪽이랑 webpack.config.js 쪽 수정을 해주니 정상작동되었습니다..!
babel.config.js
webpack.config.js
There was a problem hiding this comment.
이거 해결 되신건가요?
아래는 이렇게 코멘트 남겨주셨는데, 여기에는 정상작동되셨다고 하셔서 해결되셨는지 궁금하네용!
import react 빼는 부분은 에러가나서 일단은 놔뒀습니다..! react 17버전인데 따로 설정이 필요한 부분일까요?!
src/Counter.jsx
Outdated
| import React, { useState } from 'react'; | ||
| import Button from './Button'; |
src/index.jsx
Outdated
| import reactDom from 'react-dom'; | ||
| import Counter from './Counter'; |
|
피드백 하신부분 수정해보았습니다...! |
|
선생님 props 네임을 children으로 하니까 이런 eslint에서 오류가 나는데.. 이런경우에는 네이밍을 변경해야할까요? |
네이밍 변경해야합니다! 추가로, eslint 에러가 날 때 왜 에러가 나는지에 대해서도 공부해보시면 좋을 것 같아요! |
|
수정했습니다! |
2주차 첫번째 과제를 해보았습니다 피드백 부탁드리겠습니다!