Mock data / map

이번 프로젝트를 진행하면서 알게 된 것들을 작성합니다.

 useEffect(() => {
    fetch('/Data/headerData.json')
      .then(res => res.json())
      .then(res => setHeaderData(res));

    fetch('/Data/listRelatedData.json')
      .then(res => res.json())
      .then(res => setRelaredListUserData(res));

    fetch('/Data/WrapAuthor.json')
      .then(res => res.json())
      .then(res => setAuthorData(res));

    fetch('/Data/FooterBar.json')
      .then(res => res.json())
      .then(res => setFooterData(res));
  }, []);

• fetch 파일은 하나의 useEffect에 적어도 됩니다. ,[ ]가 없으면 무한랜더링이 일어납니다.
  반드시 작성해야합니다.

return (
    <div className="detailPage">
      <Header pageHeaderData={headerData} />
      <div className="wrapBodyFrame">
        <BodyFrame
          setIsCommentOpen={setIsCommentOpen}
          isCommentOpen={isCommentOpen}
          inputComment={inputComment}
          contentBodyData={contentBodyData}
        />
        {isCommentOpen && (
          <CommentArea
            addComment={addComment}
            deleteComment={deleteComment}
            inputComment={inputComment}
            onChange={onChange}
            value={commentValue}
          />
        )}
        <WrapAuthor authorData={authorData} />
        <section className="wrapArticle">
          <ListRelatedArticle relatedData={relaredListUserData} />
        </section>
        <div className="wrapFooterBanner">
          <img
            src="/images/DetailPage/footerImage.png"
            className="footerImage"
            alt="하단 배너"
          />
        </div>
      </div>
      <FooterBar
        footerBar={footerBarData}
        onChangePostContent={onChangePostContent}
      />
    </div>
  );

• 모든 함수는 return 안에 존재해야합니다.
  Component의 이름을 작성하고 useState를 작성해야합니다.

const [relaredListUserData, setRelaredListUserData] = useState([]);
  const [isCommentOpen, setIsCommentOpen] = useState(false);
  const [inputComment, setInputComment] = useState([]);
  const [commentValue, setCommentValue] = useState('');
  const [headerData, setHeaderData] = useState([]);
  const [authorData, setAuthorData] = useState([]);
  const [footerBarData, setFooterData] = useState([]);
  const [contentBodyData, setContentData] = useState([]);

• useState뒤에 있는 게 초기값입니다. 맨 앞에 있는 값이 input 값입니다. 뒤에 값은 변경되는 값입니다.

리팩토링 사항

• fetch 포트 주소 쓸 필요없음 (어차피 백엔드에서 주기때문에), method= get 은 기본 함수이기때문에
  생략할 수 있습니다.
• 스프레드 연산자는 뭔가를 복사하는 느낌이 됩니다. 그래서 잘 써야합니다.
  state는 직접적으로 값을 바꾸면 안됩니다. 바뀐건지 안바뀐건지 모르기 때문에 원본은 건들이면 안됩니다.
  카피본을 바꿔야합니다.
• 성격이 다른 state는 분리해주어야합니다.
• pw라고 쓰지말고 password라고 풀어쓰는 것이 좋습니다.
• state를 줄이는 게 좋음. 최소화 해야합니다.
• 이름은 변수명만 읽어도 어떤 역할을 하는지 알 수 있도록 적어주는 게 좋습니다.
• src 파일 안에다가 config.js라는 파일을 만들고 거기다가 별도로 관리해주는 것이 좋습니다.
  const BASE_URL = ‘http://10.58.0.32:8000';
  유지보수를 위해서 URL 모듈을 따로 만들어주는 것이 좋다.
• {login ? ${}} 백틱 활용하자
• 하나의 컴포넌트는 하나의 UI만 보여주도록 scss 파일도 같이 분리해주는 게 좋습니다.
• Index.js에서 reset하고 common 불러옵시다.
  Font 같은 것도 전부다 common에 위치 시켜주면 좋음
• Block 속성은 원래 width가 100%기 때문에 줄필요가 없음. 줘야할 경우가 있긴 하는데
  부모가 flex 일때는 inline-block으로 되는데 클래스로 100% 주고 싶으면 그때는 줄 수 있음
• id는 사용 안하는 게 좋음. 전체 프로젝트에서 고유해야함.
• useRef 라는 것은 두가지 용도가 있음. 첫번째는 document.쿼리셀렉터 처럼 HTML로 가져올 때.
  내가 가져오고 싶은 HTML 에 ref = { } 이렇게 쓰임.
  두번째 어떤 컨테이너처럼 사용할 수가 있다.
• 함수안에 쓰이는 변수는 함수안에서만 쓰이지 밖에서는 사라진다. 안사라지게끔 하는 useRef
• 클로저 라는 기술이 있음. 함수에 실행이 끝났을 때 함수 안에 변수를 계속 기억되도록
• alt 넣어주기
• 엔터 잘해야함
• 코드를 위치시킬 때 여러가지 방법이 있는데. 같은 관심사끼리 묶어두면 좋다. 아니면 hook들을 한 곳에 위치 시켜주거나. 위코드에서는 hook 끼리 묶어둡니다.
• 리액트 공식문서 form 제어 컴포넌트 / 비 제어 컴포넌트 라는 부분 한번 읽어보기
• scss에서 &연산자 잘 해주어야합니다.
• 네스팅을 하면 미디어 쿼리를 딱히 맨 아래에 쓸 필요 없다. 적용이 되는 최상위 태그 안에 넣으면 됩니다.
• 스트링값을 state에 넣는 것은 안하는 게 좋음 오타가 나기 쉬우니까 상수에 집어넣어서 자동완성 기능을 쓰자.
• 파스칼케이스는 컴포넌트 이름 정할때만
• 마진 속성 한줄로 변경하기
• 화살표 함수 많이 활용하기
• 화살표 함수에서 중괄호를 쓰고 안쓰고에 차이는 바로 써주면 return이 필요없는 함수가 됨
  여러줄에 코드가 나올 때는 중괄호를 씀. Return을 안써주면 undefined 가 됨
• 콘솔로그 PR 올리기 전에 지워줘야합니다.
• !!를 써서 불리언 값으로 만들어주기
• 리액트에서는 a태그 많이 안쓰는게 좋음 왜냐하면 리액트는 싱글페이지니까 아예 다른페이지로 갈 때