추상적인 이름부터 어려운 상태 끌어올리기..
너무 어려워.. 리액트 중 가장 어려운 개념 같다.
1. 상태 끌어올리기를 하는 이유?
2. 예시 코드
🎯 한 줄 정리
"다른 컴포넌트도 이 값을 알아야 해?"
그럼 끌어올려!
💭 주로 언제 상태 끌어올리기를 쓸까?
✅ 1. 두 개 이상의 컴포넌트가 같은 상태를 써야 할 때
예:
- 하나는 입력 컴포넌트,
- 다른 하나는 입력된 내용을 보여주는 컴포넌트.
→ 이럴 땐 상태를 각자 관리하지 말고, 부모에서 한 번만 관리하게 해야 해.
✅ 2. 부모가 자식의 상태를 알아야 할 때
예:
- 자식이 어떤 버튼을 클릭했는지에 따라
- 부모가 뭔가 바꿔야 하는 상황 (예: 모달 열기, 리스트 업데이트 등)
→ 자식에서 상태를 만들지 말고, 부모로 끌어올려서 부모가 제어하게 해!
✅ 3. 형제(같은 부모를 가진) 컴포넌트끼리 상태를 공유할 때
예:
- 컴포넌트 A에서 어떤 걸 선택하면,
- 컴포넌트 B에서 그 선택값에 따라 뭔가 달라져야 해.
→ A와 B는 직접 소통 못하니까, 부모가 상태를 가지고 두 자식한테 전달해줘야 해!
🎨 비유로 설명해 볼게
- 자식이 각각 혼자서 자기 방 정리하면,
엄마는 어떤 방이 어떤 상태인지 잘 몰라. - 근데 엄마가 "모든 방의 상태를 관리"하면,
엄마는 모든 자식이 어떤 상태인지 알고, 조절도 가능해.
→ 엄마 = 부모 컴포넌트
→ 자식 = 자식 컴포넌트
→ 상태 끌어올리기 = 자식이 갖던 상태를 엄마한테 넘기는 것
예시 코드
진짜 쉽고 자주 쓰이는 예시 하나 보여줄게 😉
이번엔 **“좋아요 버튼 눌렀을 때 숫자 증가 + 다른 컴포넌트에도 바로 반영되는 상황”**을 만들어볼게.
🎯 시나리오
- LikeButton 컴포넌트 👉 좋아요 버튼 클릭
- LikeCount 컴포넌트 👉 현재 좋아요 수 보여줌
이 두 개는 형제 컴포넌트니까, 부모가 좋아요 수 상태를 가지고 있어야 해!
예시로써 이해해보자.
전체적인 흐름은 이렇다.
- Parent 컴포넌트가 상태를 가지고 있음 → 그래서 "상태 끌어올리기(lifting state up)" 예제라고도 해.
- InputComponent는 입력만 담당하고, ShowText는 출력만 담당해.
- 상태(text)를 부모가 관리하니까, 두 자식 컴포넌트가 같은 데이터를 공유할 수 있어!
자식 컴포넌트 중에 어려운 파트, 설명!
💬 간단 이해
- 나 input에서 글자 입력하고, 그걸 화면에 다른 데서도 보여주고 싶어 → 상태 끌어올려야 해
- 그냥 input 안에서만 쓰고, 화면 어디에도 안 나와 → 끌어올릴 필요 없어
상태 끌어올리지 않은 경우
function InputComponent() {
const [text, setText] = useState('') // InputComponent 혼자만 씀
return <input value={text} onChange={(e) => setText(e.target.value)} />
}이 경우엔?
- text는 InputComponent 안에서만 살아.
- 다른 컴포넌트에서 이 text 값을 읽거나 쓸 수 없어.
- 그냥 "나 혼자 쓰는 input" 임!
참고 할만 한 것
