[React] Strict Mode

엄근진 모드..

 

 

만들고 싶은 웹페이지가 생각나서 리엑트 공부를 시작했다.

 

터미널 열어서 프로젝트 만드는 명령어 치는 거부터 꿀잼!

npx create-react-app {app 이름}

 

 

컴포넌트 만들고 이것 저것 바꿔보면서 놀던 와중..

 

App.js

import './App.css';
import { AppHeader } from './component/header';
import { AppNav } from './component/navigation';

function Article(props) {
  console.log("Article")
  return <article>
    <h2 align="center">{props.title}</h2>
    <p align="center">{props.body}</p>
  </article>
}

function App() {

  console.log("App Start!")

  const topics = [
    { id: 1, title: 'HTML', body: 'is ...' },
    { id: 2, title: 'CSS', body: 'is ...' },
    { id: 3, title: 'JS', body: 'is ...' },
  ]

  return (
    <div className="App">
      <AppHeader title="Home"></AppHeader>
      <AppNav topics={topics}></AppNav>
      <Article title="HELLO" body="WEB"></Article>
    </div>
  );
}

export default App;

 

 

아니 왠걸 콘솔에 로그가 두 번씩 찍힌다.

 

 

동적으로 <li> 만들어주는 이렇게 아름다운 컴포넌트도  만들어 줬는데

 

export function AppNav(props) {

    console.log("AppNav")

    let lis =  Object.entries(props.topics).map((item)=>{

        let id = item[1].id

        let link = `/read/${id}`

        let title = item[1].title

        return <li key={id}><a className='App-link' href={link}>{title}</a></li>

    })

    return <div className='App-nav'>

        <nav>

            <ul>

                {lis}

            </ul>

        </nav>

    </div>

}

 

 

map도 두번 돌아가서 아름다움이 반토막 났다..

개발자 자존심에 스크래치

 

 

 

 

개발자들의 영원한 마음의 안식처 스택오버플로우느님에게 물어보았다

https://stackoverflow.com/questions/50819162/why-is-my-function-being-called-twice-in-react

Why is my function being called twice in React?

 

"Its because your app component is a wrap in StrictMode."

 

 

StrictMode??  공식문서 ㄱㄱ

https://react.dev/reference/react/StrictMode#strictmode

<StrictMode> – React

 

예제와 함께 매우 상세한 설명이 있다. 시간여유가 있으신 분은 꼭 한번 읽어보시길 추천드린다.

 

중요사항만 정리하자면 다음과 같다

 

1. npx create-react-app 명령어도 프로젝트를 만들면 App 전체에 대해 StrictMode 모드가 적용됨

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

2. StrictMode에서는 이중 렌더링을 수행함

이는 개발모드에서만 적용되며 프로덕션 빌드에는 영향을 미치지 않는다고 한다.

 

3. 따라서 우리는 더욱 쉽게 버그를 조기에 발견할 수 있다고 한다.

 

결론: 보험은 들어주었으니 잘 활용해 보자!

 

끝!