useState를 간단하게 설명 - 비개발자를 위한 가이드 (5)-JS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2025-01-06 00:37:39

원래의

817명이 탐색했습니다.

useState Explained Simply - A Guide for Non-Developers (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

로그인 후 복사