React - 상태 끌어올리기(State Lifting)

React를 사용하다 보면 컴포넌트 간에 같은 데이터를 공유해야 할 때가 있다. 이럴 때 사용하는 패턴이 바로 상태 끌어올리기(state lifting)다. 이 글에서는 상태 끌어올리기의 개념부터 예제, 사용하는 이유까지 단계별로 정리해본다.상태 끌어올리기란?여러 컴포넌트가 같은 상태를 공유해야 할 때, 해당 상태를 공통 부모 컴포넌트로 올리는 것을 상태 끌어올리기라고 한다.React는 데이터가 항상 위에서 아래(부모 → 자식) 방향으로 흐르기 때문에, 형제 컴포넌트끼리 데이터를 공유하려면 부모 컴포넌트를 통해야 한다.왜 상태를 끌어올려야 할까?형제 컴포넌트가 서로 다른 상태를 가지면 데이터가 불일치할 수 있다. 이 경우 공통 부모가 상태를 관리하고 자식에게 props로 내려주는 방식이 가장 깔끔하다.예..

개발/React 2025. 6. 1. 18:47

Javascript - 구조분해 할당 (Destructuring Assignment)

구조분해 할당은 JavaScript의 ES6 문법 중 하나로, 객체나 배열의 값을 변수에 손쉽게 추출할 수 있도록 도와주는 문법이다.1. 배열 구조분해배열의 각 요소를 변수로 쉽게 꺼낼 수 있다.const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3사용 시 주의: 배열 순서가 중요하다.기본값 지정const [x, y = 100] = [10];console.log(x); // 10console.log(y); // 100 (undefined를 기본값으로 대체)2. 객체 구조분해객체의 프로퍼티를 변수에 바로 할당할 수 있다.const user = { name: "John", ag..

개발/Javscript 2025. 6. 1. 17:50

React - Hook 사용 규칙과 Custom Hook 예제

React에서 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있도록 도와준다. 하지만 사용 시 몇 가지 중요한 규칙을 반드시 지켜야 한다. 아래는 흔히 발생하는 오류와 함께 기본 규칙, 그리고 Custom Hook을 활용한 코드 리팩토링 예제를 정리한 것이다.React Hook 사용 시 반드시 지켜야 할 규칙1. 함수 컴포넌트 또는 Custom Hook 내부에서만 호출해야 함Hooks는 컴포넌트 함수의 최상위에서만 호출해야 하며, 함수 외부에서 직접 호출하면 에러가 발생한다.❌ 잘못된 예시:import { useState } from "react";const [state, setState] = useState(); // ❌ 컴포넌트 함수 바깥에서 사용const HookExam =..

개발/React 2025. 6. 1. 15:55

Nginx 설치 및 배포 설정 정리

1. Nginx 설치 및 시작sudo apt updatesudo apt install nginxsudo systemctl status nginxsudo systemctl start nginx2. conf 파일 설정설정 파일 생성:sudo nano /etc/nginx/sites-available/wms.ootcha.comsudo nano /etc/nginx/sites-available/api.ootcha.com기본 HTTP(80) 설정 예시 (인증서 발급 전)server { listen 80; server_name api.ootcha.com; location /.well-known/acme-challenge/ { root /var/www/html; } access_l..

개발/Nginx 2025. 6. 1. 15:09

Spring Boot + GitLab CI/CD 배포 방법

GitLab 설치 및 Spring Boot 배포 방법 정리개발 환경운영체제: Ubuntu 20.04 LTS (Server Edition)GitLab 버전: gitlab-ceJava: OpenJDK 17 (temurin17)빌드 도구: Gradle (Toolchain 지원)Spring Boot: 2.x 이상 (Jar 배포 기반)GitLab Runner: Docker 또는 Shell executor 사용배포 방식: Systemd 서비스 및 쉘 스크립트 기반 무중단 배포CI/CD: .gitlab-ci.yml 기반 자동화방화벽 관리: ufw포트 확인: lsof, pkill, netstat로그 관리: nohup, logs 디렉토리 내 파일 저장1. GitLab Community Edition 설치# 시스템 업데이..

개발/Spring 2025. 6. 1. 14:53

Linux 관련 운영 명령어 모음

리눅스 서버 운영 기본 정리시간대 설정 (UTC -> KST)리눅스 기본 시간대는 UTC이며, 한국(KST) 기준으로 맞춰야 로그 시간 등이 일치함.timedatectl # 현재 시간/시간대 확인sudo timedatectl set-timezone Asia/Seoul # 한국 시간대로 설정systemctl 명령어 정리 (서비스 관리)sudo systemctl list-units # 서비스 목록 확인sudo systemctl is-active # 서비스 상태(active 여부)sudo systemctl enable # 부팅 시 자동 시작 등록sudo systemctl start ..

개발/Linux 2025. 6. 1. 14:49

React - Hooks

React Hooks 개념 정리React Hooks는 리액트 함수형 컴포넌트에서 "상태 관리"나 "라이프사이클 효과" 같은 기능을 사용할 수 있게 해주는 함수들이다. 이전에는 클래스 컴포넌트에서만 가능했지만, Hooks 덕분에 함수형 컴포넌트로도 모든 기능을 구현할 수 있다.1. useState컴포넌트 내부에서 상태를 관리할 수 있게 해주는 Hook이다.const [count, setCount] = useState(0);count: 상태값setCount: 상태 변경 함수useState(0): 초기값 0예: 버튼 클릭할 때 숫자 증가시키기function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}..

개발/React 2025. 6. 1. 14:35

React - useRef

useRef→ 새로운 Reference 객체를 생성하는 기능const refObject= useRef();useRef vs useState항목useRefuseState✅ 주요 용도DOM 접근, 리렌더링 없는 상태 보관상태 저장 및 UI 리렌더링 트리거🔄 값 변경 시 리렌더링❌ 리렌더링 발생하지 않음✅ 값 변경 시 컴포넌트 리렌더링🧠 저장되는 값.current 프로퍼티 내부에 저장내부적으로 저장, 렌더링 간 값을 유지함⏱ 초기화 타이밍컴포넌트 마운트 시 한 번마찬가지로 첫 렌더링 시 한 번💥 비동기 동작 영향영향 없음 (값 즉시 반영 가능)렌더링에 따라 비동기 업데이트 가능성 있음📦 예시 코드const ref = useRef(null)const [count, setCount] = useState(0..

개발/React 2025. 6. 1. 14:05

React - State로 입력 관리하기

input, select, textarea 등 입력 엘리먼트들을 아래와 같이 상태관리 한다고 했을 때 더 효율적으로 관리할 수 있도록 개선Register.jsx개선 전// 간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개import { useState } from "react";const Register = () => { const [name, setName] = useState("이름"); // 초기값: 이름 const [birth, setBirth] = useState(""); // 초기값: const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const [input, ..

개발/React 2025. 6. 1. 13:05

React - State와 Props

컴포넌트가 리렌더링 되는 경우는 크게 세가지가 있다.state가 변경될 경우props가 변경될 경우부모 컴포넌트가 변경될 경우 만약 코드가 아래와 같이 있다고 가정했을 때, setLight나 setCount로 state가 변경될 경우 Bulb 컴포넌트도 같이 리렌더링 된다.import "./App.css";import { useState } from "react";const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setCount] = useState(0); const [light, set..

개발/React 2025. 6. 1. 10:34

React - State로 상태 관리

리 렌더(Re-Render), 리 렌더링(Re-Rendering)→ 컴포넌트의 상태 변화가 바뀐걸 감지해서 자동으로 이 컴포넌트를 다시 렌더링해서 UI를 변경해주는 상황 컴포넌트의 상태를 의미하고 변화할 수 있는 값인 State를 만들 수 있으며, 아래와 같이 하나의 컴포넌트에 여러개의 상태를 생성하고 관리할 수 있다. useState→ React가 제공하는 내장 함수를 사용하기 위해 import를 해야한다.→ Return0상태값1상태변화함수const state = useState(0); → 비구조화 할당 문법을 이용해서 반환을 받는 것이 일반적이다.const [state, setState] = useState(0); 실습App.jsximport "./App.css";import { useState ..

개발/React 2025. 6. 1. 09:09

React - 이벤트 핸들링(Event Handling)

Event Handling→ 이벤트가 발생했을 때 그것을 처리하는 것→ 버튼 클릭시 경고창 노출과 같은 동작const Button = ({ children, text, color = "black" }) => { // 이벤트 객체 e const onCLickButton = (e) => { console.log(e); //SyntheticBaseEvent: 합성 이벤트 객체 console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};export default Button; SyntheticBaseEvent → 합성 이벤트 객체→ 크롬, 사파리, 웨일 등 서로 다른 브라우저의 규격..

개발/React 2025. 6. 1. 08:48

◀ 1 ▶

Daily log

2025/06/01 : 「12」건