Torch for new way

styled components를 통해 함수형 컴포넌트들을 배치하려고 하는데, input에 뭘 적을 때 마다 focus가 풀리더라. focus() 함수 등 이런저런 방법을 사용해봤지만 소용이 없었고, 진짜 이유를 찾는데 오래 걸려 기록해 두기로 했다. 문제가 있는 코드는 다음과 같았다. // ... 앞쪽 코드는 생략 export function Calculator() { const CalculateModule = styled.div` ... > input { ... } ` // ...중략 return ( ) } 문제는 styled-components를 이용해 만든 element 코드 블럭의 위치였다. 저게 함수형 컴포넌트 안에 있으니 문제가 발생했던 것 같다. 내가 input에 값을 입력 > state ..

리액트 앱에서 컴포넌트의 모든 요소를 전부 동시에 보여줄 필요는 없다. 사용자가 한 번에 그 기능을 다 사용하지도 않을 뿐더러 리소스 사용 측면에 있어서도 이는 비효율적이다. 그래서 router기능을 이용해 각 기능들을 다른 주소에 분리하고, 원할때만 이를 가져와 보여줄 수 있다. 정확히 말하자면 다른 주소에 있는 다른 화면을 보여주는 것이 router이다. 이를 이용해 메뉴를 클릭하면 다른 탭을 보여준다거나 하는 기능을 추가할 수 있다. 이는 react 내장 기능은 아니므로 npm을 이용해 라이브러리를 설치해야한다. npm i react-router-dom /* src/app.js */ import { BrowserRouter as Router, Link, Routes, Route } from 'rea..

지난번에 배운 redux의 기능을 약간 더 응용해 사용해보자. 우리가 SPA를 만들 때, 다양한 변수들이 다양한 형태로 state에 저장되어 관리를 받을 것이고, 페이지의 기능이 늘어날수록 그 상태의 형태 또한 굉장히 복잡해질 것이다. 예를 들어 간단한 게시판을 만드는데도 다음과 같이 복잡한 initialState가 필요하다. /* app.js */ const redux = require('redux') const { createStore } = redux const initialState = { user:{ userid:'web7722', username:'ingoo' }, comment:{ list:[{ idx:0, content:'asdf', date:'2022-05-03' }] }, categor..

리덕스에 대해 알아보자. 리덕스란 리액트의 상태를 관리해주는 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리할 수 있어 더 효율적인 관리가 가능하다. 그렇다고 리액트에 종속된 라이브러리는 아니다. 단독으로 사용으로 하거나, 다른 것과 같이 써도 된다. 이번에는 redux만을 사용해 state를 어떻게 관리하는지 가장 쉬운 예시로 알아보도록 하자. 1.용어 정리 우선 state 관리에 관련된 용어를 다시 정리하고 넘어간다. 1.1 action action은 state의 변화를 야기하는 첫 번째 단계이다. 객체 형태로 전달되며 여기서 type은 반드시 들어간다. 그 이외의 값은 payload로, 이는 필수적이지는 않다. /* action 객체의 예시 */ { type ..

React는 변화를 감지할 경우 컴포넌트를 다시 렌더링한다. 그런데 이 과정에서 불필요하게 연산을 다시 하는 일도 많이 나타나며, 이런 것들이 누적되면 성능의 저하로 이어진다. 이런 불필요한 연산을 막아 성능을 개선시켜주기 위해 사용하는 훅이 useMemo, useCallback이다. 1. useMemo useMemo는 특정 값이 바뀌었을 때만 연산을 수행하고, 그 값이 바뀌지 않았다면 이전 연산 결과를 재사용한다. 다음과 같이 입력한 수들의 평균값을 계산하는 툴이 있다고 하자. /* src/useMemo/UseMemo.jsx */ import React, {useState} from 'react' const Average = () => { const [list, setList] = useState(''..

다음으로 useReducer에 대해 배워보자. useState와 비슷하게 현재 상태, 그리고 상태의 업데이트에 필요한 정보를 담은 action 값을 전달 받아 새로운 상태값을 return해주는 함수이다. 사용 방법도 비슷한데, useReducer는 상태를 바꿔주는 코드를 한 블럭에 몰아 넣고 이를 컴포넌트 밖으로 빼낼 수 있다는 것이 장점이다. src 폴더에 useReduce 폴더를 만들고 Reduce.jsx 파일을 만든다. /* src/useReduce/Reduce.jsx */ import react, { useReducer } from 'react' const Reduce = () => { return( How to use Reducer show userid show userpw add list --..

우리가 컴포넌트에서 다른 컴포넌트로 변수나 함수등 데이터를 전달할때 여러 단계를 거쳐야 하는 경우가 있다. 이럴 때 좀 더 편하게 그 과정을 지날 수 있도록 전역 변수를 설정하는 것이 가능하다. 그 기능을 하는 것이 createContext와 useContext이다. 각각은 전역변수를 생성하고 사용하는 기능을 한다. 다음과 같이 src 폴더 안에 useContext 폴더를 생성하고, Context.jsx 파일을 생성 후, 훅들을 import 한다. /* src/useContext/Context.jsx */ import React, { useState, useContext, createContext } from 'react' const Context = () => { const [name, setName]..

지난 글에서 한 회원가입 기능에 간단하게 두 번째 훅인 useEffect를 이용해 기능을 추가해보자. 보통 우리가 뭔가를 입력하고 form을 submit 하면 잠시간은 submit 버튼이 disabled 상태가 된다. 이를 useEffect 훅을 통해 구현할 수 있다. useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 해주는 훅이다. 클래스 컴포넌트의 componentDidMount, componentDidUpdate를 합친 기능이라고 생각하면 된다. useEffect 또한 react 내장 훅이므로 첫 줄에 다음과 같이 useEffect를 import 해오자. /* practice/src/Form/Form.jsx */ import React, { useState, useEffect ..

이제 클래스형 말고 함수형 컴포넌트를 hook과 함께 사용해 비슷한 일을 해보자. 회원가입 기능을 함수형 컴포넌트를 이용해 구현해볼 것이다. 새 react 폴더를 만든 후, src 폴더 안에 Form.jsx를 만들고, App에서 이를 import하자. 생성될 폴더명은 여기서는 practice로 정했다. npm init -y npx create-react-app practice /* practice/src/Form/From.jsx */ import React from 'react' const Form = () => { return( userid password ) } export default Form 보는것처럼 class가 아닌 화살표 함수로 컴포넌트를 만든 후, 이를 export 했다. form ele..

지난 번에 이어서 댓글의 수정, 삭제 기능을 구현해보자. 1. 댓글 수정 댓글의 내용을 누르면 그게 input element로 바뀌면서 글을 지우고 쓸 수 있게 되고, 이를 제출하면 수정한 input box의 내용이 나타나는 방식으로 수정 기능을 구현할 것이다. 이를 위해 우선 CommentList 컴포넌트의 {v.content}에 클릭시 이를 인식해 클릭한 댓글을 특정해 input box로 바꾸는 기능을 추가한다. /* practice/src/component/comment/CommentForm.jsx */ import React from 'react' class CommentList extends React.Component { state = { value: '', update:null } items..

JS를 이용한 것과 비슷하게 React를 사용해 댓글 기능을 렌더, 생성, 수정, 삭제 순으로 구현해보자. 1. Set up 곱셈 때와 마찬가지로, 댓글다는 기능을 가진 컴포넌트를 크게 몇 개의 하위 컴포넌트로 쪼개 구성할지를 가장 먼저 생각해봐야한다. 이번에도 댓글 내용을 쓰고 submit할 부분 (이하 commentForm), 이미 작성된 댓글들을 불러와 렌더링해주는 부분 (이하 commentList) 이렇게 2개 파츠로 컴포넌트를 구성해 코드를 작성할 것이다. 우선 component 폴더 안에 comment 폴더를 만들고 comment.jsx 파일을 만든다. /* practice/src/component/comment/Comment.jsx */ import React from 'react' clas..

react를 이용해, 숫자를 입력하면 그 숫자의 x9 한 값까지 출력하는 n단 계산 프로그램을 만들어보자. 우선 컴포넌트의 구성부터 생각을 해보자. 계산기 전체를 담을 컴포넌트 이름을 Multiple이라고 하면 이 Multiple은 숫자를 입력하고 submit할 input 부분, 결과를 출력해줄 list 부분 이렇게 두 개의 컴포넌트로 나눌 수 있다. 우선 가장 상위 컴포넌트가 될 Multiple 컴포넌트를 작성하자. 개발 환경은 #5~#6에서 사용한 것과 동일하다. src 폴더 안에 copmonent 폴더를 만들고, 그 안에 multi 폴더를 만든 후, 그 안에 Multiple.jsx 파일을 생성한다. /* practice/src/component/multi/multiple.jsx */ import R..

tic-tac-toe 게임을 만들 때는 html 문서에 style element를 넣고 그 안에 스타일링 관련 코드를 작성함으로써 생성되는 element들을 스타일링할 수 있었다. 그런데 이 방식 외에도 외부 CSS 파일을 import하거나, jsx 파일에서 스타일링 관련 코드를 작성해 입히는 방법도 사용할 수 있어야 한다. 지난번에 구축한 개발 환경을 다시 사용해 이번엔 몇 가지 element를 생성하고, 이를 스타일링하는 법에 대해 알아보자. 1. 외부 CSS 파일 import하기 우선 src 폴더 안에 assets 폴더를 하나 더 생성하고 style1.css, style2.css 2개의 css 파일을 만들자. 안에는 각각 다음과 같이 작성한다. /* practice/src/assets/style1...

Webpack에 대해 알아보자. 파일, 코드의 양이 많아지면서 개발자들은 코드들을 분리해 (모듈화) 다른 파일에 나누고, import, require 등을 통해 다른 파일의 데이터를 가져오는 식으로 작업을 능률화해왔다. 이를 한 단계 더 발전시킨 것이 webpack이다. webpack은 이런 파편화된 데이터들을 통합하는 것을 도와준다. 이는 기본적으로 nodeJS 환경에서 돌아가기 때문에 npm을 이용해 간단하게 설치할 수 있다. 일단 간단한 js 파일을 만들고 react, webpack을 어떤 식으로 사용할 수 있는지에 대해 간단한 예제를 들어 알아보자. 작업을 진행할 폴더를 하나 만든다. (여기서는 practice라고 명명) npm init -y npm i react react-dom npm i -D..

지금까지 한 걸 중간 정리하는 느낌으로 리액트 공식 사이트 자습서에 나온 tictactoe 게임을 만들어보자. 단계별로 이게 뭘 하는건지, 어떤 원리가 사용되었는지, 데이터의 흐름은 어떻게 되는지에 주의하면서 따라가면 될 것 같다. 전체 컴포넌트는 3가지 레벨으로 나눌 수 있는데, 컴포넌트 안에 게임판인 , 그 안에 각각의 정사각형을 이루는 컴포넌트가 있다. 우선 html을 셋업해주자. hello가 잘 나오는지 확인되었으면 컴포넌트의 내부 값 hello를 로 바꿔주고 Board 컴포넌트를 다음과 같이 작성한다. 이렇게 컴포넌트를 넣고 불러오면 3x3 의 게임판이 만들어진 것이다. 이 는 다시 3x3 등분 이 될 예정인데, 이는 함수를 하나 선언해 그 함수를 호출하는 방식으로 이루어진다. 다음과 같이 Bo..