처음부터 시작하는 Java

"react-router-dom": "^6.3.0" 기준 $ npx create-react-app 프로젝트명 $ yarn add react-router-dom Router 를 사용하기 위해 두개의 페이지를 만들어주자 components> Home.js import React from "react"; function Home() { return ( 홈 이곳은 홈이에요. 제 집이죠 ); }; export default Home; About.js import React from "react"; function About () { return ( 소개 리액트 라우터를 연습해보자 ); } ; export default About; src > Router.js 생성 (위치는 마음대로지만ㅇㅇ..) import Rea..

TodoHead 남은 할일 > done이 false 인것의 갯수를 출력 import React from "react"; import styled from "styled-components"; import {useTodoState} from "./TodoContext"; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-right: 24px; padding-left: 32px; border-bottom: 1px solid #e9ecef; h1 { margin: 0; font-size: 36px; color: #343a40; } .day { margin-top: 4px; color: #868e96; font-siz..

앞의 게시글과 이어지는 context API reducer 를 만들겠음ㅇ TodoContext.js import React, {useReducer} from "react"; const initialTodos = [ { id: 1, text: '프로젝트 생성', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done: false }, { id: 4, text: '기능 구현하기', done: false }, ] function todoReducer(state, action) { switch (action.type) { case 'CREATE': return state.concat(action.tod..

기능 구현하기 전 UI 를 만들자 프로젝트 생성 $ npx create-react-app 프로젝트명 icons, styled-componest 라이브러리 설치 $ yarn add react-icons styled-components 만들 컴포넌트 목록 TodoTemplate - 레아이웃 TodoHead - 날짜 , 남은 해야할일 TodoList - 할 일의 정보 TodoItem - 할 일의 정보 렌더링 TodoCreate - 할 일 등록 1. 배경 색 설정 글로벌 스타일 설정, createGlobalStyle 사용 App.js import './App.css'; import {createGlobalStyle} from "styled-components"; const GlobalStyle = createG..

styled-components 는 CSS in JS 관련 리액트 라이브러리중 하나 시작하기 전에... Tagged Template Literal 의 문법을 짚고 넘어가면 styled-components 를 잘 이해 할 수있다 Template Literal - 일반 문자열 / 숫자열 const name = 'react'; const message = `hello ${name}`; console.log(message); // "hello react" - 객체 const object = { a: 1 }; const text = `${object}` console.log(text); // "[object Object]" - 함수 const fn = () => true const msg = `${fn}`; co..

https://react-icons.github.io/react-icons/#/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 각 아이콘들을 하나의 컴포넌트 형태로 사용가능

CSS Module을 사용하면 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다 CRA로 만든 프로젝트에서 CSS Module을 사용할 땐 CSS 파일의 확장자를. module.css로 설정 .Role { background: black; color: white; padding: 2rem; } 이런 식으로 하나 만들게 되면 해당 CSS 파일을 불러올 때 선언한 클래스 이름들이 모두 고유해진다 고유 CSS 클래스 이름이 만들어지는 과정에서는 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용될 수 있다 className을 설정할 때에는 import로 불러온 styles 객체 안에 있는 값을 참조해야 함 import React from "react"; import styles from "./Box...

리액트 컴포넌트 스타일링 Sass 는 CSS pre-processer 두가지의 확장자가 있음 .sass / .scss 보통 .scss 문법이 더 많이 사용된다. 솔직히 걍 JSP에 사용하는 부트스트랩처럼 antd 나 머터리얼 mui 같은 프론드엔드 프레임워크를 쓰는게 정신건강에 좋긴한데 기본적은것은 알고 가야할거 같아서 배워본다. .sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color .scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color..

useReducer 의 장점 로직 분리로 인해 다른곳에서도 재사용 가능 import React, { useEffect, useReducer, useState } from 'react'; import axios from 'axios'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data: null, error: action.err..

일단 axios 를 설치하자 둘중에 하무거나 npm 쓰면 npm yarn 하면 yarn npm install axios yarn add axios 설치후 package.json 에 설치가 잘 되어 있는지 확인하자~ useState 와 useEffect 로 데이터 로딩 요청에 대한 상태를 관리 할 때에는 총 3가지 상태를 관리해 줘야한다 1. 요청의 결과 2. 로딩 상태 3. 에러 일단 컴포넌트에 Users.js 생성 import React, { useEffect, useState } from 'react'; import axios from 'axios'; function Users() { const [users, setUsers] = useState(null); const [loading, setLoad..

리액트에서는 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해야함 예를 들어 // 잘못된 코드 const object = { a: 1, b: 2 }; object.b = 3; console.log(object); 이렇게 하면 안됌 이렇게 해야함 spread 연산자 ... 를 사용해서 새로운 객체를 생성 // 이렇게 사용 (불변성을 지켜주어야함) const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; console.log(nextObject); 배열도 마찬가지임 push, slice 등의 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되고 concat, filter, map 등의 함수를..

이때까지 만들었던 것들은 App 컴포넌트에서 onToggle, onRemove 가 구현되어 있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에 전달이 되고 있음 그중 UserList 컴포넌트는 onToggle과 onRemove를 전달하기 위해서 다리 역할만 하고 있음 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에 전달하는 작업은 리액트로 개발을 하다 보면 자주 발생하는 작업인데 컴포넌트 한 개 정도는 괜찮지만 여러 개가 된다면 번거로운 상황이 발생할 것임 그럴 때 Context API와 dispatch를 함께 사용하면 복잡한 구조를 해결할 수 있다 Context API를 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음 여기서 값은 상태 일 수도 함..

컴포넌트를 만들다보면 반복되는 로직이 자주 발생하는데 그럴 때 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용 하는 방법을 알아보자 src에 hooks 라는 디렉토리를 만들고, 그 안에 useInputs 라는 파일을 만들자 *커스텀 Hooks 를 만들 때에는 보통 use 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성함 안에서 useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환 해주면 됌. useInputs.js import React, {useCallback, useState} from "react"; function useInputs(initialForm) { const [form, s..

React.memo 는 컴포넌트의 props 가 변하지 않았으면 리렌더링을 방지해서 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있음 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정 할 수 있음 CreateUser.js import React from "react"; const CreateUser = ({username, email, onChange, onCreate}) => { return ( 등록 ); }; export default React.memo(CreateUser); function > const 로 변경후 감싸주면 됨 export default 에 CreateUser 를 React.memo 로 감싸주기만 하면 됨 UserList.js 도 해주자 import React, {us..

useCallback 은 useMemo 와 비슷한 Hook 임 useMemo 는 특정 결과 값을 재사용 할 때 사용 useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용 아래의 함수는 컴포넌트가 리렌더링 될 때 마다 새로 만들어짐 솔직히 함수를 선언하는것 자체는 메모리, CPU, 리소스도 많이 차지 하지 않아서 딱히 신경 안써줘도 되긴 하지만 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 중요함. 나중에 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는것 조차 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 할텐데 그 작업을 하려면 함수를 재사용 하는것이 필수 const onCreate = () => { const user = { ..

가뜩이나 힘든 컴포넌트 구조를 개발자 도구에서 보자 1. 아래 링크로 가서 설치/ 등록 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 2. 확장 프로그램 등록 / 세부설정 3. 개발자 도구를 열고 컴포넌트 렌더링 업데이트시 하이라이트 처리 체크 그럼 사이사이에 하이라이트 처리가 된다 렌더링 업데이트가 ..

성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보자 App 컴포넌트에서 아래와 같이 countActiveUsers 라는 함수를 만들어서, active 값이 true 인 사용자의 수를 세어서 화면에 렌더링 해보자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { function countActiveUsers(users) { console.log("active 값이 ture 인 유저의 수를 센는중..."); re..

useEffect 가 하는 일? useEffect Hook 을 이용하여 React 에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야하는지를 말하는것 React 는 넘겨준 함수를 기억했다가 (이 함수가 'effect') DOM 업데이트를 수행한 이후에 불러냄 effect 를 통해 데이터를 가져오거나 다른 명령형 (imperactive) API 를 불러내는 일을 할 수도 있음 useEffect 를 컴포넌트 안에서 불러내는 이유? useEffect 를 컴포넌트 내부에 둠으로써 effect 를 통해 const state 변수, prop에 접근할 수 있음 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있음 Hook 은 자바스크립트의 클로저를 이용하여 React 에 한정된 API 를 고안하..

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현해보자 users 배열안에 active 라는 속성을 추가해주자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, email} = inputs; const onChange = e => { const { name,..

이번에는 배열에 항목을 제거 해보자 앞의 글과 계속 이어지는 중 UserList.js import React from "react"; function User({user, onRemove}) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({users, onRemove}) { return ( {users.map(user => ( ))} ); } export default UserList; User 컴포넌트의 삭제 버튼이 클릭 될 때에는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출 해 주어야한다. 여기서 onRemove 는 "id 가 ~~~ 인 객체를..

자~ 연동 드가자~ 인텔리제이, 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 외부 라이브러리를 사용하여 생..

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서 컴포넌트를 재사용 할 수 있도록 새로 만들어 보자! ** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다! 일단은 노가다 버전 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..

아래의 태그 문법은 문자열도, 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..