useState를 간단하게 설명 - 비개발자를 위한 가이드 (5)

안녕?

마케팅 경력을 갖고 있기 때문에 처음에는 React Hooks가 얼마나 위협적으로 느껴졌는지 기억합니다. 그 모든 기술 용어와 개발자 전문 용어가 내 머리를 어지럽게 만들었습니다! 많은 학습(그리고 많은 혼란) 끝에 처음 시작할 때 갖고 싶었던 가이드를 만들고 싶었습니다.

해본 적이 있는 경우:

• React 문서에서 길을 잃었나요?‍?
• 왜 일반 변수만 사용할 수 없는지 궁금합니다
• useState를 다른 사람에게 설명하는 데 어려움을 겪었습니다
• 실제로 이해가 되는 예를 원함

그렇다면 이 가이드가 여러분을 위한 것입니다! useState를 한 입 크기의 소화 가능한 조각으로 나누어 보겠습니다.

React Hooks란 무엇인가요? ?

후크를 스위스 군용 칼처럼 생각해보세요. 각 도구에는 특정 목적이 있습니다.

• useState: 마법의 메모장(이에 대해 자세히 살펴보겠습니다!)
• useEffect: 변화를 감시하는 개인 비서
• useContext: 모두가 정보를 공유하는 그룹 채팅
• useReducer: 복잡한 작업에 대한 useState의 큰 형님처럼
• useMemo: 해결책을 기억하는 똑똑한 친구
• useCallback: useMemo와 유사하지만 기능을 기억하는 데 사용됩니다
• useRef: 나중에 찾을 수 있도록 스티커 메모를 붙이는 것과 같습니다

useState란 무엇입니까? ?

무언가를 쓰고, 지우고, 새로운 것을 쓸 수 있는 마술판을 기억하시나요? useState는 귀하의 웹사이트와 똑같습니다! 이는 귀하의 웹사이트가 정보를 기억하고 필요할 때 업데이트하는 데 도움이 됩니다.

const [something, setSomething] = useState(startingValue);

다음과 같이 생각해보세요.

• 무엇인가: 현재 게시판에 쓰여진 내용
• setSomething: 쓴 내용을 바꾸는 특수 지우개/마커
• StartingValue: 시작하기 위해 칠판에 쓰는 내용

useState는 어떻게 작동하나요? ?

요리법처럼 설명하자면

1. 요리 준비(초기화)

• 요리 공간(구성 요소) 설정
• 특별한 레시피 카드 만들기(React의 상태 공간)
• 각 재료는 카드에 고유한 위치를 갖습니다

2. 레시피 변경(업데이트)

성분량을 변경하고 싶을 때:

• React는 변경 사항을 스티커 메모에 기록합니다
• 그 메모를 "할 일" 더미에 넣습니다
• 곧 레시피 업데이트 예정
• 여러 가지 변경 사항을 함께 그룹화합니다(예: 여러 재료를 동시에 변경하는 경우)

3. 변경하기(렌더링)

• React는 모든 스티커 메모를 검토합니다
• 새 금액 계산
• 레시피 카드 업데이트
• 모두에게 새로운 레시피를 공개합니다

4. 마무리(커밋)

• React가 변화를 만듭니다
• 오래된 재료 청소
• 새로운 재료 설정

실제 사례 ?

1. 간단한 환영 메시지

const [something, setSomething] = useState(startingValue);

2. 좋아요 버튼 카운터

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input value="{name}" onchange="{(e)"> setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! ?</p>
    </div>
  )
}

3. 다크 모드 토글

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onclick="{()"> setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

2. 이전 값을 기반으로 업데이트

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div>



<h2>
  
  
  Common Mistakes (We All Make Them!) ?
</h2>

<h3>
  
  
  1. Trying to Change Things Directly
</h3>



<pre class="brush:php;toolbar:false">// ? Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

언제 useState를 사용해야 합니까? ✅

필요할 때 사용하세요:

• 양식 입력 추적
• 켜기/끄기 전환
• 세어보기
• 임시정보 저장
• 사용자 상호작용 처리

언제 useState를 사용하면 안 되나요? ⛔

다음과 같은 경우에는 피하세요.

• 여러 구성요소 간에 데이터를 공유해야 합니다(컨텍스트 사용)
• 복잡한 상태 로직이 있습니다(useReducer 사용)
• 많은 양의 데이터를 다루고 있습니다
• 관련된 여러 항목을 한 번에 업데이트해야 합니다

연습하자! ?

당신의 이해도를 테스트해 볼 수 있는 작은 과제가 있습니다.

1. 간단한 카운터 구성요소 만들기
2. 증가 및 감소 버튼 추가
3. 재설정 버튼 추가
4. 보너스: "2 곱하기" 버튼 추가

댓글에 솔루션을 남겨주세요! 당신이 만든 작품을 보고 싶어요.

마무리?

useState는 처음에는 무섭게 보일 수도 있지만 실제로는 디지털 스티커 메모 시스템과 같이 웹사이트에서 정보를 기억하도록 돕는 방법일 뿐입니다! 기억하세요:

• 간단하게 시작하세요
• 기본 예제로 연습
• 완벽함을 걱정하지 마세요
• 계속 구축하고 학습하세요

저도 기술적인 배경이 없기 때문에 이러한 개념을 익히는 데 시간이 걸린다는 것을 알고 있습니다. 이는 완전히 정상입니다!

연결하자! ?

당신의 React 여정에 대해 듣고 싶습니다.

• 당신의 "아하!"는 무엇이었나요? useState를 사용하는 순간이 있나요?
• 어떤 비유가 이해에 도움이 되었나요?
• 또 어떤 React 개념을 분석하고 싶으신가요?

아래 댓글로 여러분의 생각을 공유해주세요!

다른 React 개념을 일반적인 인간 언어로 분해하는 더 많은 가이드를 기대해 주세요!

즐거운 코딩하세요! ?

---

표지 이미지 출처: 여기에 이미지 출처