리액트 주말반 두번째 수업

 

두번째 수업의 주제는 State 입니다.

function App() {
  
  const mode = 'WELCOME'; // 일반적인 방법으로 변수 선언 및 할당
  
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  let content = null;
  if(mode === 'WELCOME') {
    content = <Article title="Welcome" body="Hello, Web"></Article>
  } else if(mode === 'READ') {
    content = <Article title="Welcome" body="Hello, Read"></Article>
  }
  return (
    <div className="App">
      <Header title="WEB" onChangeMode={()=>{
        mode = 'WELCOME';
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        mode = 'READ';
      }}></Nav>
      {content}
    </div>
  );
}

 

onChangeMode() 함수를 통해 mode 값이 변경 되었음에도 App() 컴포넌트는 리렌더링되지 않습니다.
왜냐하면 mode가 단순한 지역 변수이기 때문입니다.

 

 

왜 리렌더링이 안 될까?

function App() {
  const mode = 'WELCOME'; // ❌ 그냥 지역 변수 (변화 감지 불가)
  ...
}

위의 mode는 그냥 함수 내부의 지역 변수입니다.
React는 이 변수가 바뀌는지를 절대 감지하지 못합니다, 그리고 그에 따라 렌더링도 다시 하지 않습니다.

 

 

리액트에서 상태를 변경하고 렌더링을 트리거하려면 useState를 사용해야 합니다:

import { useState } from 'react';

function App() {
  const [mode, setMode] = useState('WELCOME'); // ✅ 상태 선언
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ];

  let content = null;
  if (mode === 'WELCOME') {
    content = <Article title="Welcome" body="Hello, Web"></Article>
  } else if (mode === 'READ') {
    content = <Article title="Read" body="Hello, Read"></Article>
  }

  return (
    <div className="App">
      <Header title="WEB" onChangeMode={() => {
        setMode('WELCOME'); // ✅ 상태 변경 → 리렌더링 발생
      }}></Header>
      <Nav topics={topics} onChangeMode={(id) => {
        setMode('READ'); // ✅ 상태 변경 → 리렌더링 발생
      }}></Nav>
      {content}
    </div>
  );
}

 

 

혹시 const mode = 'WELCOME'가 아닌 

let mode = 'WELCOME';

이렇게 하면 mode값이 변경 될 수 있을까요??

생각해보니 애당초 const mode = 'WELCOME'으로 선언하면 mode 값을 변경할수가 없어서서 데이터가 변경된걸  알지못하고 렌더링이 안된거 아닐까 의심이 들었습니다.

 

하지만 핵심은 const냐 let이냐가 아닙니다.
리액트에서 컴포넌트가 다시 렌더링되기 위한 조건은 단순히 값이 바뀌었는가가 아니라,
"React가 감지할 수 있는 상태(state)가 바뀌었는가" 입니다.

 

function App() {
  let mode = 'WELCOME'; // ❗ let으로 선언했어도...

  if (mode === 'WELCOME') {
    // ...
  }

  return (
    <div>
      <button onClick={() => {
        mode = 'READ'; // ❗ 값은 바꾸지만...
      }}>
        Change Mode
      </button>
    </div>
  );
}

여기서 mode = 'READ'가 실행되어도, 리렌더링이 일어나지 않기 때문에 JSX는 업데이트되지 않습니다.
즉, React는 여전히 이전 상태 그대로 화면을 보여주죠.

React는 "컴포넌트를 함수처럼 실행"하지만, 컴포넌트 함수 내부의 지역 변수(let, const, var)는 한 번 렌더링이 끝나면 완전히 버려집니다. 즉, 버튼 클릭 후 mode가 바뀌어도, 그 바뀐 값을 React는 기억하지 못하고 다음 렌더링에서도 다시 'WELCOME'으로 시작합니다.

 

 

React에서 상태를 관리하고 화면을 업데이트하려면 useState 훅을 써야 합니다.

import { useState } from 'react';

function App() {
  const [mode, setMode] = useState('WELCOME'); // ✅ React가 추적 가능

  return (
    <div>
      <button onClick={() => setMode('READ')}>Change Mode</button>
      <p>{mode}</p> {/* 상태 변경되면 자동으로 여기도 바뀜 */}
    </div>
  );
}

useState를 사용하면:

• React가 mode의 상태 변화를 추적하고,
• setMode가 호출될 때마다 컴포넌트를 다시 렌더링합니다.

 

출처: 생활코딩 리액트프로그래밍, chatGpt