[team 05 - FE] 1주차 풀리퀘 by hoongding · Pull Request #12 · codesquad-members-2023/issue-tracker
React에서 Eslint가 잡는 오류들이 많아 eslintrc 파일에 필요 없는 rules를 추가하고 있습니다. 어떤 기준으로 규칙을 warn, off로 커스텀 해야 할 지 고민입니다.
두분이 생각하셨을 때 맞다고 생각하시는 방향으로 설정하시면 될 것 같아요! 다만 불편하다고 이 룰이 왜 적용되어있었을지, off 또는 warn으로 바꾸고 원하시는 방식으로 작성했을 때 더 나은 방식일지 등에 대해 함께 고민해보시고 두분만의 규칙을 만들어가시면 좋을 것 같습니다!
초장부터 useReducer나 Context API를 사용해서 해야할지도 조금 고민이고 먼저 useState부터 사용하면서 상태관리에 문제가 생기면 useRedcuer나 Context API 로 바꿔야할지도 고민입니다.
제 생각은 후자입니다! 굳이 useReducer 또는 context를 사용할 필요가 없는데 적용할 필요는 없다고 생각해요. 사용하시면서 불편함이 생기거나 필요성이 느껴지신다면 그때 적용해보셔도 되지 않을까요?
보내주신 PR 중 궁금했던 부분이나 생각해보셨으면 하는 부분 코멘트로 달아뒀습니다! 제 리뷰가 정답은 아니니까 모두 수용하려고 하실 필요는 없어요. 혹시 궁금한 점이 있으시거나 질문이 있으시다면 코멘트 남겨주세요! 수고하셨습니다!
이미지를 public에 둘 경우
public폴더 내에 넣게 되면 webpack에 의해 관리되지 않고 원본이 build 폴더에 복사됨public : 일반적으로 빌드 시스템에서 처리하거나 변환할 필요가 없는 Static Resource(정적 자원)에 사용public은 수정 없이 빌드 출력에 직접 복사가 된다. 따라서 이미지, 글꼴 또는 있는 그대로 제공되어야 하는 기타 파일과 같은 자산에 적합public에서 이미지를 관리하면 이미지를 소스 코드와 분리하여 빌드 시스템에서 효율적으로 처리할 수 있으므로 성능이 향상되고 번들 크기가 작아집니다.불러오는 방법
그냥 불러올땐 우리 마음대로 가져올 수 있는데,
function App() {
return (
<div>
<img src={process.env.PUBLIC_URL + '/img/imgTest.jpg'} alt='logo image' />
</div>
);
}
이미지를 src에 둘 경우
src 폴더에 이미지를 배치하면 JavaScript 번들에 포함되기 때문에 불필요한 처리 오버헤드와 더 큰 번들 크기가 발생할 수 있다.
React 애플리케이션에서 이미지 파일을 import하여 사용하면, 이미지 파일도 JavaScript 파일과 동일하게 webpack이나 Parcel과 같은 번들러에 의해 처리되어 JavaScript 번들 파일에 포함됩니다.
→ 이미지 파일이 JavaScript 번들 파일의 크기를 더욱 크게 만든다.
→ 애플리케이션의 초기 로딩 시간이 길어지는 원인이 될 수 있다.
불러오는 방법
import 되지 않기때문에 import 경로와 변수 설정해야 한다.import imgLogo from './imgTest.jpg';
function App() {
return (
<div>
<img src={imgLogo} alt='logo image' />
</div>
);
}
prop-types 사용하기. → 어차피 TS해야하니까.. 먼저 맞아보자!
Component.defaultProps는 사용 X
const defaultProps = {
prop1: false,
prop2: 'My Prop',
}
const Component = ({ prop1 = defaultProps.prop1, prop2 = defaultProps.prop2 }) => (
<div></div>
)