🤮 코딩초짜 코칭 프로젝트 - (3) 스테이트

들어가기

수업목표

• state 활용해서 모달 끄고-켜기
• props 활용해서 가라 로그인 기능 만들기

발전한 것

• 중요한 부분은 가볍게 연속해서 반복할 수 있도록, 자연스럽게 흡수될 수 있게
• 교안은 로직 완성되고 작성 시작해야함. 로직이 흔들리면 교안 작성 뇌 터져버려
• 알려줄것 생각하면서 자료 보니까 확실히 더 많은게 보이고 흡수도 쉽다.

---

state

이게 뭐냐

• 컴포넌트 만드는데 필요한 데이터
• 컴포넌트 만들어지는 과정
  • import : 만드는데 필요한 개발도구 가져오기
  • function : 개발도구 활용해서 컴포넌트 만들기
    • state : 컴포넌트에서 사용할 데이터 처리하기
    • render : 데이터 사용해서 화면 만들기
  • export : 다른데서 꺼내 쓸 수 있게 처리하기

---

정의하기

• 데이터 구조 = 데이터 차곡차곡 정리해둬야, 쏙쏙 꺼내쓸 수 있음.

  • 데이터 정리하고 꺼내는 방식에 따라 다양한 데이터 구조 있음.

• 모달을 켜고-끄기 위한 state를 만들어보자

  • app.js
    => import React, { useState } from "react";
    => const [isOpen, setIsOpen] = useState(false);

• true, false 바꿔서 모달을 켜고 꺼보자!
  

---

바꿔주기

• render안에서 함부로 state 바꾸면 안됨

• 왜? state 바뀔 때 마다 render 함수 다시 호출해야 하니까

• state 바뀔 때마다 리액트에게 알려주도록 앞서 정의한 함수 사용해야함.

• 모달에 버튼을 누르면 모달이 꺼지고, 화면의 버튼을 누르면 모달이 켜지게 해보자.

  • app.js
    => 모달켜기 버튼 만들기 (모달밖에)
    <button onClick={() => setIsOpen(true)}>모달켜기</button>
    => 모달끄기 버튼 만들기 (모달안에)
    <button onClick={() => setIsOpen(false)}>모달끄기</button>

• 버튼을 눌러서 모달을 켜고 꺼보자!

---

props

이게 뭐냐?

• 컴포넌트에 데이터를 전달하는 기능
• 요런 느낌
  

---

써보자

• 임시 로그인 기능을 만들어보자
• 입력창에 닉네임을 입력하고 버튼을 누르면 다음 화면에 그 데이터가 전달되어 환영받도록!

  • app.js
    => state const [nickname, setNickname] = useState("");
    => input <input onChange={(e) => setNickname(e.target.value)} value={nickname} ></input>
    => props <Route path="/profile" element={<PageProfile nickname={nickname} />} />
  • profile.js
    

---

나가기

• 경험 없이 개념을 이해할 수 있을까?
• 개념이란것은 비슷한 경험을 반복하면서 귀납적으로 도출되는 것인데,
• 그것을 한번도 경험한적 없는 사람에게 이해시키는 것이 가능할까?
• 사과를 본적도 없는 사람에게 사과를 이해시킨다고 생각하면..
• 그것의 맛, 빛깔, 촉감, 향.. 그리고 한입 베어물때의 아삭거리는 소리를 이해시킬 수 있다고??
• 불가능하다고 생각한다.. 이해시키기 보다 경험할 수 있도록 유도해야한다.
• 말로 설명하기 보다, 어떤 상황에 필요한지 간단하게 설명하고 그것을 써볼 수 있도록 유도해야한다.
• 말은 줄이고, 경험은 늘리자. 그게 답인 듯 하다.