📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Managing State Reacting-to-input-with-state React는 선언형 UI 라이브러리 택시기사에게 목적지만 말하면 알아서 가는 것처럼, React는 상태에 따라 UI를 자동으로 업데이트 Thinking about UI declaratively 컴포넌트의 다양한 시각적 상태를 식별한다. 상태 변화를 촉발하는 요소를 파악한다. useState를 사용하여 메모리의 상태를 표현한다. 비필수적인 state 변수를 제거한다. 이벤트 핸들러를 연결하여 state를 설정한다. Step 1: Identify your component’s different visual states Displaying many visual states at once 컴…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Adding Interactivity 리액트에서는 를 모두 라고 한다. Responding to events React를 통해 JSX에 이벤트 핸들러를 추가할 수 있다. 이때, 이벤트 핸들러는 클릭, 마우스오, input에 초점 맞추기 사용자 상호작용에 의해 실행되는 콜백함수를 의미한다. State: a component’s memory 컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 이 때, 컴포넌트는 이런 변하는 내용을 하고 있어야 한다. React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다. 컴포넌트에 state를 추가하려면 useState 훅을 사용하면 된다. 훅들은 컴포넌트가 React 기능을 사용할 수 있게 해…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Describing the UI 리액트는 UI(User Interface)를 렌더링하기 위한 자바스크립트 라이브러리이다. UI는 버튼, 텍스트 그리고 이미지들과 같은 작은 단위로부터 구성된다. 리액트는 그 작은 단위들을 재사용 가능하고, 중첩 가능하게 결합할 수 있게 해준다. 웹 사이트에서부터 폰 앱들까지 화면에 있는 모든 것들은 컴포넌트로 분해할 수 있다. 이번 챕터에서 리액트 컴포넌트들을 만들고, 커스터마이즈하고 조건적으로 보여지게하는 방법을 배울 것이다. Describing the UI 텝의 요약 내용은 짧게 작성하고 넘어가겠습니다. 당신의 첫 컴포넌트 리액트 어플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 구성된다. 리액트 컴포넌트는 이다. 컴포넌…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Get Started - Quick start 아래와 같은 것을 배울 수 있다. How to create and nest components - 컴포넌트 생성하는 방법 How to add markup and styles - 마크업과 스타일을 추가하는 방법 How to display data - 데이터를 표시하는 방법 How to render conditions and lists - 조건과 리스트를 렌더링하는 방법 How to respond to events and update the screen - 이벤트에 응답하고 화면을 업데이트하는 방법 How to share data between components - 컴포넌트 간 데이터를 공유하는 방법 Creating and nesting co…