JavaScript 에서 특정 DOM 을 선택할 때에는 getElementById, querySelector 같은 DOM Selector 함수를 사용했지만 리액트에서는 ref 를 사용한다 아래 코드는 바로 직전게시글의 내용에서 추가하여 특정 DOM 을 선택 후, 포커싱을 input 으로 잡아보자. 걍 포커싱 잡는 코드임 InputSample.jsx import React, { useState } from "react"; import { useRef } from "react"; function InputSamle() { const [inputs, setInputs] = useState({ id: "", nickname: "" }); // useRef 선언 const nameInput = useRef(); ..

components/InputSample.jsx import React, { useState } from "react"; function InputSamle() { // text 의 초기 값을 "" 로 설정 const [text, setText] = useState(""); // e.target 이벤트가 발생한 DOM input DOM const displayText = (e) => { setText(e.target.value); }; const onReset = () => { setText(""); }; return ( reset 값 : {text} ); } export default InputSamle; App.js import './App.css'; import InputSample from './..

간단하게 버튼을 누르면 카운트가 올라가는 코드를 짜보자 App.jsx import './App.css'; import {useState} from "react"; function App() { const [count, setCount] = useState(0); return ( You click {count} times setCount(count + 1)}>Click me (+) setCount(count - 1)}>Click me (-) ); } export default App; useState 함수 호출 시 배열이 반환 첫 번째 원소는 현재 값, 두 번째 원소는 Setter 함수, 총 2개의 값을 가지고 있따 useState(0)은 변수의 초기 값을 0으로 설정하겠다. 이말임 useState에는 함..

조건부 렌더링 if나 조건부 연산자처럼 스크립트 연산자를 사용해서 특정 조건에 따라 다른 결과물을 렌더링하는것 App.jsx import logo from './logo.svg'; import './App.css'; import Sakura from "./Sakura"; import Wrapper from "./Wrapper"; function App() { return ( ); } export default App; Sakura.jsx import React from "react"; function Sakura(props) { return Sakura {props.isSpecial ? props.name : null} ; } export default Sakura; Wrapper.jsx import R..

App컴포넌스에서 Sakura 컴포넌스로 name 라는 변수 값을 전달하려고 할 때 App.jsx import './App.css'; import Sakura from "./Sakura"; function App() { return ; } export default App; Sakura.jsx import React from "react"; function Sakura(props) { return Hi, {props.name}; } export default Sakura; 결과 비구조화 할당 App.jsx import './App.css'; import Sakura from "./Sakura"; function App() { return ; } export default App; Sakura.jsx im..

아래의 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법 const element = Hello, world!; JSX 규칙 태그는 꼭 닫혀야 한다. 두개 이상의 태그가 존재하면 하나의 태그로 감싸줘야 한다. return()부분에서의 두개 이상의 태그 시 javascript 값 에는 {} 사용 주석은 {/* */} 이렇게 달자 { } 빼먹으면 /* 내용 */ 이렇게 출력됨 import './App.css'; import Hello from "./Hello"; function App() { const name = { title: 'my name is...', name: 'Lee soju' }; return ( //두개 이상의 태그에 하나로 감싸기 //Fragment..

Hello 라는 컴포넌트를 생성해보자 Hello.js // 컴포넌트 생성시 react 호출 import React from "react"; function Hello() { return Hello, React!; } // 다른 컴포넌트에도 사용이 가능하도록 export default Hello; App.js 에서 컴포넌트 호출 import './App.css'; import Hello from "./Hello"; function App() { return ( ); } export default App; 결과 컴포넌트의 재사용 import './App.css'; import Hello from "./Hello"; function App() { return ( ); } export default App; 결과

데이터를 랜더링을 해보고 map을 써서 데이터를 효율적으로 작성해보자 일단 기초 테이블 생성 import "./App.css"; function App() { return ( 품목 가격 사과 1000원 감귤 2000원 ); } export default App; 객체 생성, 랜더링 후의 코드 import './App.css'; function App() { const obj = { header: ["품종", "가격","수량(개)"], data: [ {fruit: "사과", price: "1000원", ea: "5"}, {fruit: "감귤", price: "2000원", ea: "3"} ] }; return ( {obj.header[0]} {obj.header[1]} {obj.data[0].fruit} ..

https://newline.tistory.com/117 React - 인텔리제이로 리액트 프로젝트 만들기 * React 사용에 앞서 NodeJS가 설치되어 있어야 한다. 설치는 https://nodejs.org/en 에서 안정적인 LTS 버전으로 설치하자. 1. New Project - JavaScript - React App - Next 2. 프로젝트명과 경로 입력 후 Next.. newline.tistory.com

https://codingapple.com/unit/react1-install-create-react-app-npx/ 리액트 React 설치와 개발환경 셋팅 (2022 ver) - 코딩애플 온라인 강좌 0:00 개발환경 셋팅 0:42 리액트프로젝트 생성은 2:38 이제 에디터에서 오픈해서 코드짜십쇼 4:04 뭐했는지 설명 개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 13 codingapple.com