전체 글

컴포넌트는 종종 상호작용의 결과로 스크린에 보여줄 것을 바꾸어야해요. 폼에 입력을 하면 입력창이 업데이트가 되어야하고, 사진 캐러셀에서 "다음"을 누르면 보여지는 이미지가 달라져야하며, "구매하기"를 누르면 장바구니에 상품이 담겨야해요. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억할" 필요가 있어요. 리액트에서는 이렇게 컴포넌트에 지정된 메모리를 상태라고 해요. 이 페이지에서는 - useState훅을 사용하여 어떻게 상태변수를 추가하는지 - 어떤 쌍의 값을 useState 훅에서 반환하는지 - 한 개 이상의 상태변수를 어떻게 추가하는지 - 상태는 왜 지역적으로 호출되는지 를 알아볼 거예요. When a regular variable isn’t enough | 정규 변수로는 충분..

리액트에서는 JSX에 이벤트 핸들러를 추가할 수 있어요. 이벤트 핸들러는 클릭, 호버, 폼 입력창에 포커싱하기와같은 여러 상호작용에 반응하여 동작하는 사용자 정의 함수예요. 이 페이지에서는 - 이벤트 핸들러를 작성하는 다른 방법들 - 부모 컴포넌트에서 이벤트를 처리하는 로직을 어떻게 전달하는지 - 이벤트를 어떻게 전파하고 어떻게 멈추는지 를 알아볼 거예요. Adding event handlers | 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 후 적절한 JSX 태그에 prop으로 전달해야해요. 아래는 아직 아무것도 하지 않는 버튼이에요. 아래의 세 단계를 통해 사용자가 클릭했을 때 메시지가 보이도록 만들어볼게요. Button 컴포넌트 안에서 handleClick 함수를 선언하세요..

화면의 어떤 항목들은 사용자의 입럭에 반응하여 업데이트 되기도 해요. 예를 들어서 사진 갤러리를 클릭하면 활성 이미지가 바뀌어요. 리액트에서 시간이 지나면서 변하는 데이터를 상태라고 해요. 컴포넌트에 상태를 추가할 수 있고 필요하다면 업데이트할 수도 있어요. 이 챕터에서는 상호작용을 처리하고 상태를 업데이트하고 시간에 따라 다른 결과를 보여주는 컴포넌트를 작성하는 방법을 배울 거예요. 콘텐츠 목록 사용자가 시작한 이벤트를 처리하는 방법 상태를 사용하여 컴포넌트가 정보를 "기억"하도록 만드는 방법 리액트가 두 단계로 UI를 업데이트하는 방법 상태를 바꾼 직후에 바로 업데이트가 되지 않는 이유 여러 상태 업데이트를 대기열에 넣는 방법 상태에서 객체를 업데이트 하는 방법 상태에서 배열를 업데이트 하는 방법 R..