멋쟁이사자처럼 프론트엔드 스쿨 2기 47_Day

aydennote·2022년 6월 13일
0

📖 오늘 학습 뽀인트!

  1. React
    1-1 개념 복습
    1-2 React 과제

1. React

1-1 개념 복습

💬 React에서 재랜더링 되는 기준 3가지
1. 해당 컴포넌트가 가진 변수가 useState로 수정될 때.
2. 해당 컴포넌트의 부모가 재랜더링 될 때.
3. 해당 컴포넌트의 props가 변경되었을 때.


💬 컴포넌트는 객체이다.

1-2 React 과제


내용 : React 페이지를 React로 구현해 보는 과제

잘 안 되는 부분 :

  • Navbar 부분에 문서, 자습서, 블로그 커뮤니티 클릭 시 각각 새로운 페이지 랜더링.(Router 사용)
  • 컴포넌트를 나눠 활용.

잘 한 부분 :

  • Navbar 각 항목 클릭 시 클릭 이벤트로 해당 컴포넌트 랜더링.
    (useState 사용)

문제 :

  • Route와 Link를 사용해서 클릭 시 URL 변경 및 재랜더링을 시도했으나, URL만 바뀌고 재랜더링 되지 않음.

해결 :
index.js 파일에 StrictMode 를 삭제 후 해결.

// 수정 전
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
// 수정 후
root.render(<App />)

💬 StrictMode
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다.

profile
기록하는 개발자 Ayden 입니다.

0개의 댓글