처음부터 시작하는 Java

자~ 연동 드가자~ 인텔리제이, node.js 가 설치되어있다는 가정하에 연동을 시작해보자 (강제로 잠깐 떠났지만 인텔리제이가 그리웠다.. 인텔리제이 못 잃어..) 1. File -> New -> Project 클릭 2. Spring Initializr 에서 설정하기 언어가 코틀린이면 코틀린으로 바꾸고 설정! 타입은 메이븐이나 그래들 중 본인이 사용하는것ㄱㄱ 3. 원하는 Dependencies 선택 Spring Web만 있어도 된다! 나중에 추가 설정 가능 4. 프로젝트를 만들면 이런식으로 생길텐데 터미널을 열자 npx create-react-app 원하는 디렉토리 이름 위의 이미지의 simple-react 는 내가 명명한 것이다. 그 후 엔터를 누르면 설치 시작! 가만히 구경만 해주자 그러면 happy..

배열에 새로운 항목을 추가하는 방법을 알아보자! 우선 input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 components 디렉터리에 생성 import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; 이번 컴포넌트에는 상태관리를 CreateUser 에서 하지 말고 보무 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용해보자 위의 컴포넌트를 App 에서 UserList 위에 렌더링 해보자 App.js import './App.css..

컴포넌트에서 특정 DOM 을 선택해야 할 때 => ref 를 사용 함수형 컴포넌튼에서 이를 설정 할 때 => useRef 사용 설정 useRef Hook 은 DOM 을 선택하는 용도 외에도, 다른 용도가 있다! 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후 업데이트 된 상태를 조회 할 수 있지만, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다. 이 변수를 사용하여 다음과 같은 값을 관리 할 수 있다. setTimeout, setInterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생..

걍 간단하게 ㄱㄱ html 함수는 해당 태그를 포함한 문자열을 통째로 가져오거나 셋팅하는것이고 ex) TEST text 함수는 태그를 제외한 문자열만 가져오거나 셋팅 ex) TEST ez

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서 컴포넌트를 재사용 할 수 있도록 새로 만들어 보자! ** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다! 일단은 노가다 버전 UserList.js import React from 'react'; function usersList() { const users = [ { id: 1, usersname: 'velopert', email: 'public.velopert@example.com' }, { id: 2, usersname: 'tester', email: 'tester@example.com' }, { id: 3, usersname: 'admin', email: 'imAdmin@example.com' } ]; return ( ..

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