Web/React5 05. useEffect, 웹소켓 1. useEffect 사용하기 새로운 앱(effect) 생성 ⏺ 배열을 화면에 표시해보자json 검증사이트: https://jsonlint.com/ JSON Online Validator and Formatter - JSON LintLoading... About the JSONLint Editor JSONLint is a validator and reformatter for JSON, a lightweight data-interchange format. Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. What Isjsonlint.. 2024. 5. 17. 04. 배열 데이터 활용, useRef 1. 배열 데이터를 활용 React에서 배열 데이터를 활용하여 동적으로 사용자 목록을 표시하는 컴포넌트 구현해보자 array 앱 생성UserList.js 생성 UserList.js > import React from "react" function UserList() { const users = [ { id: 1, username: 'apple', email: 'apple@apple.com' }, .. 2024. 5. 16. 03. Counter, Input, useState 1. Counter 컴포넌트 Cmder 실행 Cmder > cd 경로 yarn create react-app counter cd counter yarn start 1. 경로이동 2. 앱생성 3. 앱 경로로 이동 4. yarn 시작 Counter.js 생성 Counter.js > import React from "react"; function Counter() { return ( div> h1>0h1> button>+1button> .. 2024. 5. 16. 02. 컴포넌트에 값 전달하기 1. 컴포넌트에 값 전달하기 방법 jSX > Component > function Hello(props){ 안녕하세요. {props.userid}님 } src > App.js src > App.js > import React from "react"; import Hello from "./Hello"; import './App.css'; function App(){ const userid = 'apple'; const style = { backgroundColor: 'deepskyblue', color:.. 2024. 5. 13. 01. React, 컴포넌트 생성 1. 리액트(React) - facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리 - 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공 - Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상 - 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용 - JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴포넌트를 정의 라이브러리(liberary) vs 프레임워크(Framework)라이브러리 - 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식- 애플리케이션의 전체 구조를 개발자가 직접설계- .. 2024. 5. 13. 이전 1 다음
