본문 바로가기

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.
LIST