리액트 공식 문서 읽기 - 화면 업데이트 하기

리액트의 state를 업데이트하여 화면에 기록하고 보여주는 방법에 관해 공부하였습니다.


  • 화면에 특정 정보를 기억하게 하고 싶은 경우 상태를 관리하는 useState(훅)를 사용합니다.

  • 예) 화면에 버튼이 클릭 된 횟수를 기록하는 경우

    1. React에서 useState를 가져옵니다.(import)
    2. 그 후에 함수 내부에 state 변수를 선언할 수 있습니다.
    3. 상태를 나타내는 변수 count, 상태를 변경하는 함수 setCount가 들어갑니다.

    4. 일반적으로 [something, setSomething] 과 같은 형식으로 이름을 짓습니다.

    5. useState(0)으로 설정하면 처음엔 0이 전달되지만, 상태(state)를 변경하고 싶다면 setCount를 호출하면 됩니다.

  • 동일한 컴포넌트라도 여러 번 렌더링 하면 각각 고유한 state를 가지고 업데이트 됩니다.

  • 따라서 두 개의 버튼을 렌더링 했다면 각각 고유한 state를 가집니다. 각 버튼의 count가 개별적으로 증가합니다.


참고

  • 링크: https://react-ko.dev/learn#responding-to-events



빠른 시작 - React

React-ko

빠른 시작 - React

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 12월 4일 오전 12:59

조회 87

댓글 0

    함께 읽은 게시물

    《친구의 취향》

    ... 더 보기

    📺'뤼튼'의 이상한 광고, 만든 사람에게 직접 의도를 들어봤습니다

    ... 더 보기

    “이래도 되나?” – 뤼튼의 이상한 광고 만들기 – 제일 매거진

    magazine.cheil.com

    “이래도 되나?” – 뤼튼의 이상한 광고 만들기 – 제일 매거진

    < 왜 어떤 제품에만 '열광적인 팬'이 생길까요? >

    1

    ... 더 보기

    야근의 관성

    제가 한국에서 직장 생활을 시작하고 가장 먼저 배운 것은 아이러니하게도 야근이었습니다. 신입이었던 제게 야근은 선택의 문제가 아니었거든요. 선배들에게 야근은 너무나 당연한 루틴이었고, 저녁 5시가 되면 "퇴근 안 해?"가 아니라 "저녁 뭐 먹을까?"라는 질문을 던졌습니다. 누가 정해놓은 것처럼 부장님이 퇴근해야 과장님이, 과장님이 퇴근해야 대리님이, 대리님이 퇴근해야 비로서 저 같은 신입도 퇴근 생각을 할 수 있었습니다.

    ... 더 보기

     • 

    저장 15 • 조회 3,950


    AI에게 코딩을 잘 시키려면 아주 정확하게 스펙을 줘야하는데(앞으로도 그럴 것), 스펙을 작성하는 것 보다 내가 코드를 쓰고 그걸로 스펙을 작성하라고 하는게 더 빠른게 문제..🫠

    조회 1,274


    길은 잃은 이력서

    

    ... 더 보기

     • 

    저장 5 • 조회 697