React (7) 썸네일형 리스트형 [리액트 공식문서 2023] Adding Interactivity 0. 학습 목표 In React, data that changes over time is called state.(시간이 지남에 따라 변하는 데이터를 state라 부른다) In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. 1. Responding to events (subtitle: How to handle user-initiated events) - React lets you add event handlers to you JSX. - Built-in components like only support bu.. [리액트 공식문서 2023] Describing the UI 0. 학습 목표 React is a JavaScript library for rendering user interfaces (UI). In this chapter, you'll learn to create, customize, and conditionally dispaly React components. 1. Your First Component(subtitle: How to wirte your first React component) 학습 목표 1.1 What a component is (컴포넌트가 무엇인지) 1.2 What role components play in a React application (리액트 앱에서 컴포넌트는 어떤 역할을 하는지) 1.3 How to write your first R.. [리액트 공식문서] HOOK 5 ~ 8 5. Hook 규칙 - Hook은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다. - 1. 최상위(at the Top Level)에서만 Hook을 호출한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않는다. - 2. 오직 React 함수 내에서 Hook을 호출해야 한다. 6. 자신만의 Hook 만들기 - 자신만의 Hook을 만들면 컴포넌트로 로직을 함수로 뽑아내어 재사용할 수 있다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() =>.. [리액트 공식문서] HOOK 1 ~ 4 1. Hook 소개 - 우리가 왜 Hook을 React에 추가했는지, 그리고 Hook이 애플리케이션을 작성하는 데 어떠한 도움을 주는지 알아보자. 1) 동기 - 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. > Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있다. - 생명주기 메서드를 기반으로 쪼개진 복잡한 컴포넌트들은 이해하기 어렵다. > Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. - React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 한다. Class는 사람과 기계를 혼동시킨다. > Hook은 Class 없이 React 기능들을 사용하는 방법들을 제시한다. 2.. [리액트 공식문서] 주요 개념 9 ~ 12 9. 폼 - React application에서 사용자가 폼을 제출할 때, JavaScript 함수로 1) 폼의 제출을 처리하고 2) 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 이를 "제어 컴포넌트(controlled components)"라고 불리는 기술을 이용하는 것이다. 1) 제어 컴포넌트 (Controlled Component) - HTML에서 , , 와 같은 폼 태그들은 사용자의 입력을 기반으로 자신의 데이터를 관리하고 업데이트 한다.(value attribute를 통해 자체적인 Data를 갖고 그 데이터는 DOM에 저장된다) - React에서는 변경할 수 있는 데이터가 일반적으로 컴포넌트의 state 속성에 유지되며 setState( )에 의해 업데이트 된다. (=> inp.. [리액트 공식문서] 주요 개념 5 ~ 8 정리 5. State and Lifecycle - 아래 코드를 const root = ReactDOM.createRoot(document.getElementById("root")); function tick() { const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ) root.render(element); } setInterval(tick, 1000); - Clock 컴포넌트로 만들어 재사용하고 캡슐화 해보자 (??? 컴포넌트 캡슐화의 의미 ??? 컴포넌트 내부의 값은 다른 컴포넌트가 바꿀 수 없다? 라는 의미인걸까? 재사용이 가능한 컴포넌트를 만들기 위해서 캡슐화라는 용어를 쓴 것일까?? ++ 리액트에서 컴포넌트 캡슐화란 메인 어.. [리액트 공식문서] 주요 개념 1 ~ 4 정리 1. Hello React - React는 사용자 인터페이스(User Interface)를 만들기 위한 JavaScript 라이브러리이다. - 선언형: 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있을까 생각하는 것보다 < 컴포넌트나 데이터 등의 배치를 통해 무엇이 렌더링 될지 생각하는 것이 선언형 UI 핵심이다. 2. JSX - JavaScript 를 확장한 문법이다. - React element 를 생성한다. const element = Hello, World! - 위에 희한한 태그 문법은 문자열도, HTML도 아닌 JSX 문법이다. 1) JSX에 표현식 포함하기 - JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다. - 유효한 JavaScript 표현식에는 2 .. 이전 1 다음
