오늘도 개발

리액트 컴포넌트와 state, props

Sueeeeeee — Wed, 20 Dec 2023 16:13:35 +0900

1. 컴포넌트

재사용 가능한 UI 단위(=레고 블럭).

컴포넌트는 다른 컴포넌트를 자식으로 가질 수 있다.

컴포넌트를 사용하는 이유

1. 코드 재활용 용이

2. 유지보수가 쉬움

3. 페이지 구성 파악 쉬움

컴포넌트 생성 방식

- 클래스 컴포넌트 : 초기에 사용하던 방식. 함수형보다 복잡한 편

- 함수 컴포넌트 : 초기에 state를 관리할 수 없어서 잘 사용하지 않았으나,

16.8 버전에서 hooks가 추가되며 state를 관리할 수 있게 되며 많이 사용하게 됨.

2. props(=properties)

컴포넌트가 갖고 있는 속성값.

읽기 전용 값이다.

부모 컴포넌트에서 props를 전달받아 원하는 컴포넌트에서 사용한다. (함수의 파라미터와 비슷)

예시1)

function Child(props) {
  console.log(props); // {titleColor: 'red'}
  return (
    <div>
      <h1 style={{ color: props.titleColor }}>Child Component</h1>
    </div>
  );
}

function Parent() {
  return (
    <div>
      <h1>Parent</h1>
      <Child titleColor="red" />
    </div>
  );
}

예시2) props로 자식 컴포넌트에게 이벤트 핸들러 전달하기

function Child(props) {
  return (
    <div>
      <h1 style={{ color: props.titleColor }}>Child Component</h1>
      <button onClick={props.changeColor}>Click</button>
    </div>
  );
}

function Signup() {
  const [color, setColor] = useState("red");

  return (
    <div>
      <h1>Parent</h1>
      <Child titleColor={color} changeColor={() => setColor("blue")} />
    </div>
  );
}

3. state

컴포넌트가 갖고 있는 상태값. (=화면에 보여줄 컴포넌트의 정보)

업데이트 할 수 있는 값이다.

컴포넌트 내에서 정의하고 사용한다.

예시 1)

import React, { useState } from "react";

function Greet() {
// useState 함수는 [상태값(state)을 저장하는 변수, 상태값을 갱신하는 함수]를 배열로 반환한다.
// useState에 인자로 넣은 값이 상태값(count)의 초깃값이 된다.
  const [color, setColor] = useState('blue'); 

  return (
    <div>
      <h1 style={{ color: color }} >Hello</h1>
    </div>
  );
}

export default Greet;

예시 2) Event

import React, { useState } from "react";

function Greet() {
  let [color, setColor] = useState("red");

  return (
    <div>
      <h1 style={{ color: color }}>hello</h1>
      <button onClick={() => setColor("blue")}>Click</button> 
      // 버튼 클릭 시 color 변수의 값을 blue로 바꿈
    </div>
  );
}

export default Greet;

리액트 Hook

Sueeeeeee — Wed, 20 Dec 2023 15:26:30 +0900

Hook이란?

함수 컴포넌트에서 state를 사용할 수 있게 해주는 기능.

Hook 도입 전에는 클래스 컴포넌트에서만 state를 사용할 수 있었다.

클래스는 함수보다 작성이 까다롭기 때문에, Hook 등장 이후로는 거의 사용하지 않는다.

클래스형 컴포넌트 VS 함수 컴포넌트

클래스로부터 생성된 인스턴스는 독립적으로 움직일 수 있기 때문에, state를 가질 수 있었다.

함수는 한 번 호출되면 메모리 상에서 사라지기 때문에, state를 가질 수 없었다.

=> 클로저를 사용하면 함수도 state를 가질 수 있다. 이를 이용해서 Hook이 등장했다.

Hook 사용 규칙

1. 최상위 레벨에서만 Hook을 호출해야 한다.

반복문, 조건문, 중첩 함수 내에서 호출하면 오류가 난다.

import React, { useState } from "react"

function Hooks(props) {
  if (!props.isExist) {
    const [state, setState] = useState(); // Error!
  }

  const [state2, setState2] = useState(); // Error!
}

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

일반 js 함수에서는 호출할 수 없다.

참고

위코드 참고자료

React 공식문서 - Hooks at a Glance

w3schools - React Hooks

react-router 사용하기

Sueeeeeee — Wed, 20 Dec 2023 09:07:15 +0900

1. SPA란?

Single Page Application. 즉, 페이지가 하나인 애플리케이션.

리액트 프로젝트에서 html 파일 개수는 1개이다.

한 개의 html을 사용해서 여러 개의 페이지를 보여주려면 routing이 필요하다.

2. Routing이란?

url 경로에 따라 다른 화면을 보여주는 것.

리액트에는 라우팅 기능이 없으므로 라우팅을 지원하는 라이브러리를 사용해야 한다.

3. react-router

라우팅을 지원하는 라이브러리.

1) 설치

npm install react-router-dom

2) 페이지 만들기

src/pages/Login.js

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

src/pages/Signup.js

import React from "react";

function Signup() {
  return <h1>Signup</h1>;
}

export default Signup;

3) Router 컴포넌트 만들기

src/Router.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./pages/Login";
import Signup from "./pages/Signup";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

4) index.js에 App 대신 Router 넣기

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

* 라우트 이동하는 방법

1) <Link> 컴포넌트 사용하기

클릭 시 지정한 경로로 바로 이동시킬 때 사용.

프로젝트 내에서 페이지 전환할 때 사용.

DOM에서 <a> 태그로 변환됨.

ex) 썸네일 클릭 시 상세페이지로 이동

2) useNavigate 훅 사용하기

페이지 이동 시 추가로 처리해야 할 로직이 있을 때 사용.

ex) 로그인 버튼 클릭 시, 입력 정보에 따라 인증/인가 처리 후 각기 다른 페이지로 이동

import React from "react";
import { Link, Navigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
  const goToSignup = () => {
    alert("회원가입을 해주세요");
    navigate('/signup');
  }
  return (
    <div>
      <button className="loginBtn" onClick={goToSignup}>로그인</button>
    </div>
  )
}

export default Login;

JSX란

Sueeeeeee — Tue, 19 Dec 2023 17:01:33 +0900

JSX(Javascript Syntax Extension)

마크업을 편리하게 작성하기 위해 등장한 문법.

js와 html을 합쳐놓은 것 같은 형태.

jsx 코드는 자바스크립트가 인식할 수 없는 문법이므로, Babel로 변환해야 함.

장점

1. html 태그를 그대로 사용할 수 있음

2. html 마크업과 js 로직을 같이 구현 가능

3. js 문법을 이용해서 html 생성 가능(별도의 html 파일이 필요 없음)

4. DOM과 Event를 사용하는 기존 방식보다 작성 편리

특징

1. 모든 jsx는 하나의 부모태그를 가져야 함.

// GOOD
function Hello() {
   return <h1>Hello</h1>
}

// GOOD
function Hello() {
   return (
   <>
     <h1>Hello</h1>
     <h2>Hello2</h2>
   </>
   )
}

// 오류 발생
function Hi(){
   return <h1>hi</h1><h2>hihi</h2>
}

2. 모든 태그는 self closing이 가능함

function Login() {
   return <div />
}

3. camelCase만 사용

4. JSX 내에서 자바스크립트 동작 가능

리액트 개요

Sueeeeeee — Tue, 19 Dec 2023 14:02:13 +0900

1. 프론트엔드 기술의 변천

1세대

HTML, CSS, Javascript, DOM, Event

2세대

jQuery - 자바스크립트를 간단하게 작성하기 위해 등장

BUT 웹이 복잡해지면서 한계에 도달(DOM을 조작하는 단계에서 멈춤)

3세대

프레임워크 : Angular, Vue

라이브러리 : React

2. 프레임워크 VS 라이브러리

프레임워크

작업을 하기 쉽게 누군가 만들어 놓은 틀

(ex. 냄비, 국자, 라면이 구비된 부엌)

사용하기 편리하지만, 프레임워크에서 제공하지 않는 도구를 사용하기 어려움.

프레임워크에서 제공하는 도구 사용법을 익혀야 하기 때문에 러닝커브가 높은 편.

라이브러리

작업을 하기 쉽게 누군가 만들어 놓은 하나의 도구

(ex. 냄비)

필요한 도구를 알아서 조합해야 하므로 시간이 더 들지만 원하는 조합으로 사용 가능.

3. 리액트란?

2013년 페이스북에서 개발한 라이브러리.

대규모 애플리케이션 구축에 적합.

특징

사용자 수가 가장 많음 => 활성화 된 생태계.

컴포넌트 정의가 간단한 편.

React Native를 사용하면 웹이 아닌 플랫폼에서도 사용 가능.

Angular, Vue와 달리 자바스크립트 문법 그대로 사용 => 러닝커브 낮음

Angular, Vue와 달리 View만 담당 => 내장된 기능이 부족하므로 보통 다른 라이브러리와 함께 사용

선언적인 개발이 가능함(UI를 자동으로 업데이트 해 줌).

UI를 자동으로 업데이트하며 VirtualDOM을 통해 최적화 구현.

절차적 개발 VS 선언적 개발

방 청소를 예시로 들면,

절차적 개발은 어떻게(How) 목적을 이룰 것인지, 절차에 신경을 써야 한다.

1. 창문을 연다

2. 청소기를 돌린다.

3. 걸레질을 한다.

선언적 개발 이룰 목적(What)이 무엇인지에만 신경을 쓰면 된다.

1. 깨끗한 방을 그린다.

2. 로봇에게 그림을 전달한다.

사용자는 How가 아니라 What에만 신경을 쓰면 된다.

VirtualDOM

건물을 리모델링하는 예시를 들어보자.

리모델링을 위해 벽돌, 톱, 페인트가 필요하다.

VirtualDOM을 사용하지 않는 경우,

벽돌을 창고에서 가져온다.

톱을 창고에서 가져온다.

페인트를 창고에서 가져온다.

창고에 여러 번 왔다갔다 해야 한다.

VirtualDOM을 사용하는 경우,

벽돌, 톱, 페인트를 동시에 창고에서 가져올 수 있다.

브라우저는 우리가 DOM을 조작할 때마다 레이아웃을 변경하고, 색을 칠하는 과정을 반복한다.

VirtualDOM을 사용하면, 필요한 변경사항을 가상의 DOM에 적용했다가 실제 DOM에 한 번에 반영한다.

4. Node

Node

자바스크립트 실행환경 중 하나. (대표적인 자바스크립트 실행환경은 브라우저)

브라우저 바깥에서도 자바스크립트를 실행할 수 있게 해준다.

NPM(Node Package Manager)

패키지 : 실행할 수 있는 하나 하나의 프로그램

NPM : Node에서 사용할 수 있는 여러 프로그램을 관리하는 프로그램.

CRA(Create-React-App)

리액트 개발환경을 구축해주는 도구(toolchain)

출처

위코드 [React] 학습자료

비교 연산자 ==와 ===

Sueeeeeee — Tue, 5 Dec 2023 10:36:28 +0900

1. 일치 연산자 ===

엄격한 비교.

값과 타입이 모두 일치해야 True.

2. 동등 연산자 ==

느슨한 비교.

값만 일치하면 True.

"5" === 5 // false
"5" == 5 // true

Postgres 실행중인 쿼리 보기/취소하기

Sueeeeeee — Mon, 6 Mar 2023 19:13:12 +0900

실행중인 쿼리 확인하기

SELECT *
FROM pg_stat_activity
--where state='idle' 상태가 idle인 것만 보기
--ORDER BY query_start ASC; 최근에 실행된 쿼리 순으로 정렬

실행중인 쿼리 취소하기

SELECT pg_terminate_backend(<pid of the process>)

update와 bulk_update

Sueeeeeee — Mon, 27 Feb 2023 15:43:50 +0900

Writer 인스턴스의 id가 2, 4, 6, 8, 10인 것만 policy=True로 설정된 상태.

policy 필드가 True인 인스턴스의 policy_second 필드도 True로 업데이트하는 상황 가정.

1. iteration과 save 사용

업데이트 대상이 100개라면 UPDATE문이 100번 실행됨.

실행 속도가 느리고, 첫줄에서부터 save()를 실행할 때 까지 데이터에 변경이 일어날 수 있다는 것이 단점.

수많은 row에 한꺼번에 락을 걸지 않는다는 것이 장점.

writers = Writer.objects.filter(policy=True)
for writer in writers:
   writer.policy_second = True
   writer.save()

SELECT "writers"."id", "writers"."description", "writers"."policy", "writers"."policy_second" FROM "writers" WHERE "writers"."policy"; args=(); alias=default
UPDATE "writers" SET "description" = 'abc', "policy" = 1, "policy_second" = 1 WHERE "writers"."id" = 2; args=('abc', True, True, 2); alias=default
UPDATE "writers" SET "description" = 'abc', "policy" = 1, "policy_second" = 1 WHERE "writers"."id" = 4; args=('abc', True, True, 4); alias=default
UPDATE "writers" SET "description" = 'abc', "policy" = 1, "policy_second" = 1 WHERE "writers"."id" = 6; args=('abc', True, True, 6); alias=default
UPDATE "writers" SET "description" = 'abc', "policy" = 1, "policy_second" = 1 WHERE "writers"."id" = 8; args=('abc', True, True, 8); alias=default
UPDATE "writers" SET "description" = 'abc', "policy" = 1, "policy_second" = 1 WHERE "writers"."id" = 10; args=('abc', True, True, 10); alias=default

2. update 사용

UPDATE.. WHERE..문이 한 번만 실행됨.

WHERE로 잡힌 업데이트 대상이 100개라면 100개에 락이 걸림.

실행 속도가 빠르고 실행 중 데이터가 변경될 염려 없음.

업데이트 대상이 되는 row의 개수가 적을 때만 추천.

Writer.objects.filter(policy=True).update(policy_second=True)

UPDATE "writers" SET "policy_second" = 1 WHERE "writers"."policy"; args=(True,); alias=default

3. bulk_update 사용

1, 2번 절충 가능.

batch_size로 한 번에 업데이트할 row의 개수 지정할 수 있다.

업데이트 대상이 100개이고 batch_size를 20으로 지정하면

- 20개 row에 락을 걸고

- UPDATE를 실행하고

- 락 해제

과정을 5번 반복한다.

(Queryset.update()에는 트랜잭션이 적용된다.)

writers = Writer.objects.filter(policy=True)
writers_to_update = []

for writer in writers:
    writer.policy_second = True
    writers_to_update.append(writer)
    
Writer.objects.bulk_update(writers, ['policy_second'], batch_size=2)
# writer 인스턴스를 2개씩 끊어 업데이트

for writer in writers 시 호출

SELECT "writers"."id", "writers"."description", "writers"."policy", "writers"."policy_second" FROM "writers" WHERE "writers"."policy"; args=(); alias=default

Writer.objects.bulk_update(writers_to_update, ['policy_second'], batch_size=2) 시 호출

(0.000) BEGIN; args=None; alias=default
(0.000) UPDATE "writers" SET "policy_second" = CASE WHEN ("writers"."id" = 2) THEN 1 WHEN ("writers"."id" = 4) THEN 1 ELSE NULL END WHERE "writers"."id" IN (2, 4); args=(2, True, 4, True, 2, 4); alias=default
(0.000) UPDATE "writers" SET "policy_second" = CASE WHEN ("writers"."id" = 6) THEN 1 WHEN ("writers"."id" = 8) THEN 1 ELSE NULL END WHERE "writers"."id" IN (6, 8); args=(6, True, 8, True, 6, 8); alias=default
(0.000) UPDATE "writers" SET "policy_second" = CASE WHEN ("writers"."id" = 10) THEN 1 ELSE NULL END WHERE "writers"."id" IN (10); args=(10, True, 10); alias=default

모델 필드 추가 시 default 값 설정

Sueeeeeee — Sat, 18 Feb 2023 18:36:57 +0900

모델에 새로운 필드를 추가할 때 default 값을 지정한 후 마이그레이션하면,

기존에 있던 데이터의 새 필드에도 알아서 default 값을 채워준다.

예)

1. 기존 모델

class User(models.Model):
   accept_notification = models.BooleanField()

User.objects.all()
# <User: User object (1)>

2. 필드 추가

class User(models.Model):
   accept_notification = models.BooleanField()
   accept_email_notification = models.BooleanField(default=False, null=True)

3. 마이그레이션

python manage.py makemigrations
python manage.py migrate

4. 기존 데이터의 새 필드 값 확인

User.objects.get(id=1).is_accept_email_notification 
# False

유의할 점

장고가 DB에 마이그레이션 할 때 DB 테이블에 락이 걸린다.

데이터 개수가 10만개 이상인 큰 테이블을 위의 방식으로 작업한다면( = migration으로 자동으로 default 값 채워주기),

락이 걸리는 시간이 길어지므로 다운타임이 길어지는 문제가 발생한다.

큰 테이블에 디폴트 값이 있어야 하는 필드를 추가할 때는 아래의 방식을 사용하는 것이 더 낫다.

1. 필드 추가 : default 없이 null=True 옵션만 적용

class User(models.Model):
   accept_notification = models.BooleanField()
   accept_email_notification = models.BooleanField(null=true)

2. 마이그레이션

python manage.py makemigrations
python manage.py migrate

3. 쉘이나 주피터 노트북으로 디폴트 값 삽입

기존에 있던 User 오브젝트의 accept_email_notification 필드에 디폴트 값 False를 쉘을 이용하여 수동으로 채워준다.

4. 추가된 필드에 디폴트 값 추가

class User(models.Model):
   accept_notification = models.BooleanField()
   accept_email_notification = models.BooleanField(null=true, default=False)

5. 마이그레이션

python manage.py makemigrations
python manage.py migrate

merge conflict 터미널에서 한 번에 해결하기

Sueeeeeee — Sat, 18 Feb 2023 18:24:35 +0900

accept incoming change

경로의 모든 conflicts에 대해 accept incoming change 적용

git checkout --theirs <경로>

accept current change

경로의 모든 conflicts에 대해 accept current change 적용

git checkout --ours <경로>