또욘짱의 깜짝 퀴즈 - 🧚‍♀️ 상태끌어올리기를 활용한, 코드 작성 연습

---

출력은 아래와 같이 되어야 하고, 정답 코드는 같이 옆에 첨부 되어 있습니다 !

---

 

상태 끌어올리기 개념 공부하면서, 같은 맥락의 화면을 출력하는 예시 코드를 공부 했는데, 

다시 보니 또 리셋.. 된 제 머리네요. 다시 공부하게 해주셔서 고맙습니다 ✨

저는 출력을 담당하는 컴포넌트로 또 따로 분리가 되어 있었는데, 이 두 코드의 차이점도 마지막에 차근 차근 뜯어보며 공부해봅시다.

 

++ 다행히, 코드를 칠 수 있게 되었다 ! 물론 눈으로 씍 흐름을 훑은 뒤 였지만..

다시 복습하며 아래에서 정리하면서, 오늘 저녁에 다시 한번 그냥 바로 쳐보기 도전하겠습니다.

---

 말로 풀면 이런 흐름이다 !

 1. App 컴포넌트(부모 컴포넌트)

처음에 const [name, setName] = useState('')
👉 이름을 담을 상태값 name을 만들고, 그걸 바꿀 수 있는 함수 setName도 만들어!

 

name의 초기값은 빈 문자열이야. (처음엔 아무 이름도 없음 -> 만약에 creamy라고 적으면 creamy라고 떠 있을것이다.)

그리고 화면에는 이렇게 보여줘:

<h1>안녕하세요 ! {name}님 !</h1>

그리고 <NameInput />이라는 자식 컴포넌트를 불러오면서,
부모가 가진 name과 setName을 props로 전달해줘

2. NameInput 컴포넌트(자식 컴포넌트)

자식은 props를 받아서 이렇게 써:

function NameInput({ name, setName }) { ... }

그리고 input 태그를 그려.

<input value={name} onChange={(e) => setName(e.target.value)} />

value={name}: 지금 상태값(name)을 input에 보여줘

사용자가 input에 뭔가 입력하면 그 값을 받아서 상태를 업데이트해줘!

 

한 줄 요약!

사용자가 인풋 창에 텍스트를 치면 → 그게 name이라는 상태값이 되고,
그 상태는 부모가 관리하고 → 자식 컴포넌트는 그걸 props로 받아서 보여주고 바꿔줘.

---

🤹‍♀️ 전체 흐름 다시 정리하면?

1. 처음엔 빈 input이 있고, 이름은 없음 (따라서 초기 상태값을 '' 빈 문자열로 하는 것.)
2. 사용자가 input에 “Jane”이라고 치면
   👉 onChange 이벤트가 발생함
3. setName("Jane")이 호출됨
4. 상태가 바뀌고 → 화면이 다시 그려지고
5. name은 "Jane"이 되고,
   <h1>에는 "안녕하세요 ! Jane님 !"이 보이고
   input에는 "Jane"이 그대로 보여

---

이해 됐는데, 볼 때마다 아리송한 부분. 위치를 기억하고 있으면 편할 것 같아서 메모해두기.

<NameInput name={name} setName={setName} />

✅ name={name}

• 앞의 name은 자식 컴포넌트(NameInput)의 props 이름이야.
• 뒤의 name은 부모 컴포넌트(App)에서 선언한 상태 값이야.

👉 말로 하면:

“부모가 가진 이름 상태 값을 자식에게 name이라는 이름으로 넘겨주는 거야.”

---

 

리액트 공부하기 - 상태 끌어올리기

여기서 다뤘던 예제와의 차이는 

화면에 출력하는 컴포넌트 분리 유무

 

현재 페이지에서 다루고 있는 코드는, 부모 함수 안에 바로 출력하는 

 

 

두번째는, 다른 링크에서 정리한 코드로 컴포넌트가 분리된 것