![]()
검색창에 검색어를 입력했을 때 자동완성을 띄워주는 다음과 같은 UI를 개발중이었다.검색창에서 포커스가 아웃되면 드롭다운된 자동완성 리스트를 안보이게 만들어줘야 했다.하지만 검색창 컴포넌트와 자동완성 리스트 컴포넌트는 각기 다른 컴포넌트로 분리되어있다. 내가 스스로 구현 방안에 대한 생각해본 결과는 아래와 같다.부모 컴포넌트에 isFocused라는 상태값을 하나 만들어두고검색창 컴포넌트에서 onFocus시에 isFocused를 true로,onBlur시에 isFocused를 false로 바꿔준다. 하지만 LLM에게 물어봤을 때, useRef를 사용하는 방법으로 안내를 해주었다. 공부를 위해 useRef가 뭔지 부터, 내가 떠올린 방법과 useRef를 사용하는 방법은 어떻게 다른지 탐구해보려고 한다. useR..
훅은 함수 컴포넌트 안의 상태나 라이프 사이클을 다루기 위한 기능이다. 다루는 대상이나 기능에 따라 여러 종류가 있다. 훅의 도입에 따라 클래스 컴포넌트와 동등한 기능을 가진 함수 컴포넌트를 기술할 수 있게 됐다. 컴포넌트 안의 상태와 로직을 훅으로 추출한다. 이에 따라 컴포넌트 코드를 깔끔하게 유지할 수 있어 코드 재사용성을 높일 수 있다. 상태 훅useState하나의 새로운 상태를 작성한다. 업데이트 함수를 호출하면 상태가 바뀌고, 훅이 있는 컴포넌트는 다시 그려진다.const [상태, 업데이트_함수] = useState(초기 상태)업데이트 함수를 호출할 때 인수로 값 뿐만 아니라 함수를 호출할 수 있다. 함수를 전달하면 함수의 반환값이 다음 상태가 된다. 또한 해당 함수에는 현재 상태가 들어간다.함..
한 데이터 리스트는 프론트의 status에서도, 백의 DB에서도 관리된다. 만약 데이터가 새로 추가되는 경우에는 프론트의 status update가 먼저일까, 백의 DB Insert가 먼저일까? 1. 프론트 단의 status 업데이트가 선행되는 경우백 단에서 Insert시 오류가 발생하면 프론트와 백 간의 데이터 차이가 생길 수 있다.2. 백 단의 Insert가 선행되는 경우백 단의 Insert가 성공해야만 프론트 단에서 추가한 데이터를 보여줄 수 있으므로, 딜레이가 생긴다. 그럼 어떻게 하냐우선, 프론트에서는 업데이트 이전 데이터를 보관해둔 채로 데이터를 업데이트하고, 백에 Insert 요청을 보낸 후 success면 그대로 두고, error발생 시 -> 이전 데이터로 덮어쓰면 된다. 단, 이것은 내..
![]()
리액트를 학습하고 처음으로 진행한 토이 프로젝트에서 App.js 파일이 굉장히 무거워졌다.(생각없이 짜서..) 다행히 컴포넌트 형식으로 짜두어서 분리가 크게 어렵진 않았지만, import 관련해서 빌드 에러가 안나는 경우가 있어서 서버를 껐다 켰다 반복하기도 했다. 다음 번에는 시작할 때 염두에 두고 파일 구조를 미리 짜두고 개발하는 것이 나을 것 같다. 그런 의미에서 이번에 진행한 Todo 토이 프로젝트의 파일 구조를 기록한다.Frontend/├── node_modules├── package-lock.json├── package.json├── public└── src/ ├── App.css ├── App.js ├── App.test.js ├── api/ │ └── tod..
리엑트 프로젝트에서 빌드를 하면 frontend/build 경로에 결과물이 저장된다. 하지만, 나는 풀스택 토이 프로젝트를 진행하고 있어 모노레포 형태로 하나의 repository에 프론트, 백 코드를 전부 담아놓았다.프론트에서 빌드한 결과물을 옮기는 과정이 귀찮아서 백 디렉토리에 바로 저장할 수 있는 방법을 찾아봤다. 1. 프론트엔드 프로젝트 루트 경로에 .env 파일을 생성한다.2. .env 파일에 아래 내용을 작성한다.DISABLE_ESLINT_PLUGIN=trueBUILD_PATH=../backend/원하는 경로참고로, DISABLE... 설정은 ESLint 플러그인 충돌을 피하기 위해 추가한 설정이다. 결과적으로 보면 아래와 같은 구조를 가진다.monorepo/├── backend/│ ├..
Save버튼이 클릭되었을 때 onSave(id, value)가 호출되도록 하였지만, 함수를 직접 호출하여서 문제가 발생했다.아래는 문제의 코드.Save문제점은 아래와 같다.위에 작성된 props.onSave()함수는 onClick이벤트 발생 시가 아닌, 컴포넌트 렌더링 시에 즉시 실행된다.따라서 버튼 클릭과 상관없이 렌더링될 때마다 실행되어 무한 루프 혹은 불필요한 상태 업데이트가 발생한다.이를 방지하기 위해서 사용되는 것이 래핑 함수. props.onSave(id, value)}>Save화살표 함수를 사용하여 래핑했다. 이렇게 하면 렌더링 시에는 실행되지 않고, 이벤트 발생 시에만 해당 함수가 호출된다.그런데, 왜일까?onSave()와 같이 함수명 뒤에 괄호를 붙이면 해당 함수가 즉시 실행된다.onSa..
const [state, setState] = useState({ isOpen: false, data: '' }); 객체로 묶어서 선언하면 된다.
useEffect(() => { console.log('a'); return () => console.log('b'); // 클린업 함수. }, [count]); // 의존성 배열 useEffect의 반환값을 "클린업 함수"라고 함 useEffect의 효과(effect)를 정리(cleanup)하는 역할. 클린업 함수는 다음 useEffect가 실행되기 전에 호출됨.
코드 작성 App.js import './App.css'; import Hello from './component/Hello'; function App() { return Props : properties ; } // 프로퍼티로 준 값이 Hello 컴포넌트에 인자로 전달됨. export default App; Hello 컴포넌트에 age라는 프로퍼티를 설정한다. Hello.js import { useState } from "react"; export default function Hello(props) { const [name, setName] = useState("Mike"); const [age, setAge] = useState(props.age); const msg = (age > 19) ? "성..
![]()
state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다.그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다. 예제) 📁 Hello.jsexport default function Hello() { let name = "Mike"; function changeName() { name = (name === "Mike") ? "Jane" : "Mike"; } return State {name} Change Name ;}changeName() 함수는 이름이 Mike일 때는 Jane으로, Mike가 아니면 Mike로 변경한다. 이 함수를 버튼의 이벤트..
