React 기초 01 · Rendering
렌더링이 뭔가요?
화면이 '다시 그려진다'는 게 무슨 뜻인지, 왜 일반 변수를 바꿔도 화면은 그대로인지 직접 눌러보며 이해해요.
1
먼저 비유로
칠판에 다시 쓰는 것과 같아요
칠판에 3이라고 적혀 있어요. 내 노트(메모리) 속 숫자를 4로 고쳐도, 칠판은 누군가 다시 쓰기 전까지 그대로 3이에요. React에서 화면은 칠판, 다시 쓰기 = 렌더링이에요. 그리고 React에게 "칠판을 다시 써줘"라고 말하는 방법이 바로 state를 바꾸는 것이고요.
그래서 화면을 바꾸고 싶으면 그냥 변수를 고치는 게 아니라, React가 알아채고 다시 그릴 수 있는 state를 바꿔야 해요. 아래에서 두 가지를 나란히 눌러보면 차이가 바로 보여요.
2
직접 해보기
state vs 일반 변수, 눌러서 비교
state +1과 일반 변수 +1을 번갈아 눌러보세요. 위쪽 검은 배지의 다시 그려진 횟수도 같이 지켜보면, 어떤 버튼이 화면을 "다시 그리는지" 보여요.
직접 만져보세요
이 컴포넌트가 다시 그려진 횟수1
state 값0
일반 변수 값0
일반 변수 +1을 눌러도 위쪽 다시 그려진 횟수와 오른쪽 숫자가 그대로죠? React는 일반 변수가 바뀐 걸 모르기 때문이에요. 다시 그리기를 누르면 그제야 진짜 값을 따라잡아요.
자식 컴포넌트부모가 준 값: 0
일반 변수 +1을 여러 번 누른 뒤, 다시 그리기를 눌러보세요.
핵심은 이거예요
화면은 저절로 바뀌지 않아요. state가 바뀔 때만 React가 컴포넌트 함수를 다시 실행해서(= 렌더링) 화면을 새로 그려요.
3
흐름으로 보기
다시 그려지는 순서
- 1버튼을 누르면 setCount(state 변경 함수)가 호출돼요.
- 2React가 '어, 이 컴포넌트 화면이 달라지겠네' 하고 다시 그리기를 예약해요.
- 3컴포넌트 함수가 처음부터 다시 실행돼요. 이게 렌더링이에요.
- 4새로 만든 화면을 이전 화면과 비교해, 달라진 곳만 실제 DOM에 반영해요.
4
코드로 보기
딱 이만큼이에요
데모에서 슬라이더·애니메이션을 걷어내면 핵심은 이게 전부예요. 두 버튼의 차이만 보세요.
function Counter() { // state: 바꾸면 React가 "다시 그려야겠다"고 알아챈다 const [count, setCount] = useState(0); // 일반 변수: 바뀌어도 React는 모른다 (화면이 안 따라옴) let plain = 0; return ( <div> <p>state: {count}</p> <p>일반 변수: {plain}</p> {/* 이 버튼은 화면이 바뀐다 - state를 바꿨으니까 */} <button onClick={() => setCount(count + 1)}>state +1</button> {/* 이 버튼은 화면이 안 바뀐다 - 일반 변수만 바꿨으니까 */} <button onClick={() => { plain = plain + 1; }}>일반 변수 +1</button> </div> );}5
조심하세요
처음에 꼭 헷갈리는 것
- 일반 변수를 바꾸고 화면이 안 바뀐다고 당황하기. 버그가 아니에요. 화면을 바꾸려면 그 값을 state로 만들어 setState로 바꿔야 해요.
- state를 직접 수정하기 (예:
count = count + 1). React는 setState로 바꿀 때만 알아채요. 직접 고치면 화면이 안 따라와요. - "다시 그려지면 느려지지 않나?" 걱정. React는 달라진 부분만 실제 화면에 반영해서 대부분 빨라요. 정말 무거울 때만 나중에 배울 useMemo로 아끼면 돼요.