Devjun's Devlog

VSCode 에러, eslint prettier 충돌 에러로 빨간줄 지우기

JunGi Jeong — Tue, 20 Aug 2024 23:08:15 +0900

코드 팩토리님의 Nestjs 강의 진행중 vscode에 빨간줄이 넘친다.

.eslintrc.js에 하기 코드 추가

rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto'
      }
    ]
  }

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto'
      }
    ],
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

해결

리눅스 로그 검색

JunGi Jeong — Tue, 13 Aug 2024 23:20:05 +0900

TARGET이라는 메시지를 검색하고 TARGET을 포함한 50번째 줄까지의 로그를 확인할 수 있는 명령어

단순 확인용으로 사용시 GREP이 적합한 선택

grep -n "TARGET" sample.log | head -n 1 | cut -d: -f1 | xargs -I {} sed -n '{} , {}+50p' sample.log

grep -n "S6F11" sample.log:

sample.log 파일에서 "S6F11" 문자열이 포함된 줄을 검색합니다.
-n 옵션은 해당 줄 번호를 함께 출력합니다. 출력 형식은 줄번호:내용입니다.
head -n 1:

grep 명령어의 결과에서 첫 번째 줄만 가져옵니다. 이는 "S6F11"이 처음 등장하는 줄입니다.
cut -d: -f1:

head 명령어의 결과에서 줄 번호만 추출합니다. :를 구분자로 사용하여 첫 번째 필드(줄 번호)만 가져옵니다.
xargs -I {} sed -n '{} , {}+50p' sample.log:

xargs -I {}는 앞에서 추출한 줄 번호({})를 sed 명령어의 위치에 대입합니다.
sed -n '{} , {}+50p' sample.log는 {}번 줄부터 {} 줄 이후 50줄까지 출력합니다. {}는 S6F11이 포함된 줄 번호로 대체됩니다.

awk '/TARGET/ {found=NR} found && NR<=found+50' sample.log

명령어 분석:
/TARGET/:

awk는 각 줄을 처리할 때 주어진 패턴과 일치하는지 확인합니다.
여기서는 "TARGET"이라는 패턴을 찾고 있습니다. "TARGET"이 포함된 줄을 찾으면 그 줄에 대해 지정된 작업이 수행됩니다.
{found=NR}:

"TARGET"이 포함된 줄이 발견되면, found라는 변수를 현재 줄 번호(NR)로 설정합니다.
NR은 awk의 내장 변수로, 현재 처리 중인 줄 번호를 나타냅니다.
이 단계에서는 "TARGET"이 처음 나타난 줄의 번호를 found에 저장합니다.
found && NR<=found+50:

이 부분은 조건문으로 작동합니다. 조건이 참일 경우에만 해당 줄을 출력합니다.
found가 설정되어 있는지(found는 0이 아니므로 참), 그리고 현재 줄 번호(NR)가 found 줄 번호부터 50번째 줄 이내인지 확인합니다.
즉, "TARGET"이 포함된 줄부터 시작하여 그 줄 번호에서 50줄을 넘어가지 않는 경우에만 출력됩니다.
sample.log:

awk 명령어의 입력 파일입니다. sample.log 파일을 줄 단위로 처리하면서 "TARGET"이 포함된 줄과 그 이후의 50줄을 출력합니다.

1. Grep

특징: grep은 매우 빠르고 효율적으로 텍스트 파일에서 특정 패턴을 검색하는 데 특화된 도구입니다.
장점:
- 대량의 데이터를 빠르게 처리할 수 있습니다.
- 간단한 패턴 매칭 작업에 매우 적합합니다.
단점:
- grep은 텍스트를 검색하고 일치하는 줄을 출력하는 데 주로 사용되며, 이후 특정 줄 수를 출력하는 기능은 직접 지원하지 않습니다. 따라서 패턴 매칭 후 추가적인 텍스트 조작이 필요할 때는 추가 도구(예: xargs, sed)와 함께 사용해야 합니다.
적합한 상황:
- 로그 파일에서 특정 문자열을 빠르게 찾고자 할 때.
- 단순한 패턴 매칭이 필요할 때.

2. Awk

특징: awk는 더 복잡한 텍스트 처리 작업을 지원하는 프로그래밍 언어에 가까운 도구입니다. 패턴 매칭뿐 아니라 다양한 조건과 계산, 필드 조작 등이 가능합니다.
장점:
- 복잡한 조건 처리와 데이터를 구문 분석할 때 유용합니다.
- 패턴 매칭 후 후속 작업(예: 줄 출력, 계산)을 바로 수행할 수 있습니다.
단점:
- 간단한 작업에서는 오히려 과도할 수 있으며, 복잡한 스크립트를 작성해야 하는 경우도 있습니다.
- 다른 도구에 비해 약간 느릴 수 있습니다.
적합한 상황:
- 특정 패턴을 찾은 후 추가적인 작업이 필요한 경우(예: 특정 필드만 추출, 특정 조건에 따른 출력).
- 텍스트의 특정 구조를 기반으로 복잡한 처리가 필요할 때.

3. Sed

특징: sed는 스트림 편집기(스트림을 읽으면서 처리)로, 텍스트를 일괄적으로 편집하거나 특정 범위의 줄을 추출하는 작업에 적합합니다.
장점:
- 텍스트 파일의 대규모 편집 작업에 매우 효율적입니다.
- 텍스트의 특정 범위를 빠르게 추출할 수 있습니다.
단점:
- awk보다는 덜 직관적일 수 있으며, 복잡한 작업에서는 더 복잡한 명령어를 필요로 합니다.
- 복잡한 텍스트 처리에는 적합하지 않을 수 있습니다.
적합한 상황:
- 특정 줄 범위를 빠르게 추출하거나 텍스트를 대규모로 치환할 때.
- 파일 내에서 특정 위치부터 연속된 줄을 출력할 때.

요약

Grep: 가장 빠르고 간단한 패턴 매칭이 필요할 때, 긴 로그 파일에서도 효율적으로 작동합니다.
Awk: 복잡한 조건 처리 및 데이터 조작이 필요한 경우 적합합니다.
Sed: 특정 줄 범위를 추출하거나 텍스트를 일괄 편집할 때 유용합니다.

긴 로그 파일의 경우:

단순히 특정 패턴을 찾는 경우 grep이 가장 적합합니다.
특정 패턴 이후의 줄을 출력하거나 복잡한 텍스트 처리 작업이 필요한 경우 awk가 더 적합할 수 있습니다.
특정 패턴 이후의 정확한 줄 범위를 추출하고자 한다면 sed도 좋은 선택이 될 수 있습니다.

연차 관리 캘린더 프로젝트 With ChatGpt #1

JunGi Jeong — Thu, 13 Jun 2024 23:32:23 +0900

1. 프로젝트 초기 설정

npx create-react-app leave-management
cd leave-management
npm install react-router-dom tailwindcss postcss autoprefixer

상태관리를 위한 react-router-dom과 디자인에 크게 신경쓰지 않기에 tailwindcss를 사용할 예정 (bootstrap 에 익숙하기도 하다)

npm audit fix --force

프로젝트의 패키지 종속성에서 발견된 보안 취약점을 자동으로 수정하는 명령어이다.

보안 강화, 자동화, 최신 버전의 패키지 사용 등의 이점이 있지만

호환성 문제 및 불안정성으로 인한 버그, 예상치 못한 변경으로 앱 동작 변경이 야기될 수 있다.

본인은 위 명령어를 사용하지 않을 예정이다.

연차 관리 캘린더 프로젝트 With ChatGpt #0

JunGi Jeong — Tue, 4 Jun 2024 22:28:17 +0900

개인적으로 근태 관리 프로그램이 필요하여 리액트로 간단하게 만들어 보려 한다.

하지만 퇴근 후 만사가 귀찮으니 ChatGpt로 기획안부터 최대한 가이드를 받아 제작해보자.

우선적 목표는 본인이 사용하고자 함이니 사용자와 관리자의 역할을 통합시킨 프로그램을 작성할 예정

대규모 보다는 소규모 팀에 적합할 것이다.

하기 문서는 chatgpt로 작성하였으며 일부 수정하여 작성하였다.

연차관리 프로그램 기획안(사용자와 관리자의 역할 통합)

1. 개요

연차관리 프로그램은 직원들이 연차를 신청하고, 자신의 연차를 관리할 수 있는 시스템입니다.

모든 사용자는 자신뿐만 아니라 다른 직원들의 연차도 관리할 수 있는 권한을 가집니다.

이를 통해 작은 팀에서 효율적으로 연차를 관리하고 투명하게 정보를 공유할 수 있습니다.

2. 주요 기능

공통 기능 (사용자 겸 관리자)

연차 신청: 사용자가 자신의 연차를 신청하고 필요한 세부 정보를 입력할 수 있습니다.
연차 조회: 자신의 연차 잔여 일수 및 사용 내역을 확인할 수 있습니다.
연차 승인/거절: 다른 사용자의 연차 신청을 승인하거나 거절할 수 있습니다.
연차 취소: 승인 대기 중인 연차를 취소할 수 있습니다.
통계 및 보고서: 팀의 연차 사용 현황에 대한 통계 자료 및 보고서를 생성할 수 있습니다.
알림 기능: 연차 신청 및 승인 상태에 대한 알림을 받을 수 있습니다.

3. 시스템 아키텍처

프론트엔드

React: 사용자 인터페이스를 구축하는 데 사용됩니다.
Redux: 상태 관리를 위해 사용됩니다.
React Router: 페이지 라우팅을 관리합니다.

백엔드

Node.js: 서버 측 로직을 처리합니다.
Express.js: API 서버를 구축합니다.
MongoDB: 데이터베이스로 사용됩니다.

인증 및 보안

JWT (JSON Web Tokens): 인증 및 세션 관리를 위해 사용됩니다.
bcrypt: 비밀번호 암호화를 위해 사용됩니다.

4. 페이지 구성

로그인 페이지

이메일 및 비밀번호 입력
회원 가입 링크 및 비밀번호 재설정 링크

대시보드

전체 연차 현황 요약
최근 연차 신청 내역

연차 신청 페이지

연차 신청 폼 (날짜, 사유 입력)
신청 버튼

연차 조회 페이지

자신의 연차 사용 내역 및 잔여 연차 표시
연차 신청 상태 (승인 대기, 승인됨, 거절됨)

연차 승인/거절 페이지

팀원들의 연차 신청 목록
승인 및 거절 버튼

통계 및 보고서 페이지

연차 사용 현황에 대한 통계 자료
연차 사용 내역 보고서 생성 기능

5. 개발 일정

1단계: 요구사항 분석 및 기획 (1주)

요구사항 수집 및 분석
기획안 작성

2단계: 디자인 및 설계 (2주)

UI/UX 디자인
데이터베이스 설계
API 설계

3단계: 프론트엔드 개발 (3주)

React 컴포넌트 개발
Redux 상태 관리 구현
페이지 라우팅 설정

4단계: 백엔드 개발 (3주)

Node.js 및 Express.js 서버 구축
API 엔드포인트 구현
MongoDB 데이터베이스 연동

5단계: 통합 및 테스트 (2주)

프론트엔드와 백엔드 통합
기능별 테스트 및 디버깅
사용자 피드백 반영

6단계: 배포 및 유지보수 (1주)

서버 배포
사용자 교육 및 지원
유지보수 및 업데이트 계획 수립

6. 결론

이 연차관리 프로그램은 직원들이 자신의 연차를 관리하고, 다른 직원들의 연차도 함께 관리할 수 있도록 설계되었습니다.

이를 통해 팀 내에서 연차 사용의 투명성을 높이고, 효율적으로 휴가 계획을 세울 수 있습니다.

철저한 기획과 단계별 개발을 통해 안정적이고 사용자 친화적인 시스템을 구축할 수 있습니다.

아래 이미지는 Dalle로 생성한 컨셉 이미지이다.

실제로는 React Calendar 라이브러리를 활용하여 아래 이미지에서 약간의 대시보드 형식을 추가한 느낌이 될 것 같다.

리액트 18 버전 정리

JunGi Jeong — Wed, 29 May 2024 23:29:34 +0900

Automatic Batching

기존 방식

Automatic Batching 적용

// 기존 버전
setTimeout(() => {
    setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    // 각 state의 업데이트 마다 재렌더링이 발생
}, 1000)

// 현재 버전
setTimeout(() => {
    setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    // 재렌더링이 마지막에 한 번만 발생 (Automatic Batching)
}, 1000);

Transitions

긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 개념

업데이트의 종류

긴급한 업데이트
- 사용자와 직접적인 인터랙션이 일어나는 경우
- 예) 글자 입력, 버튼 클릭 등
긴급하지 않은 업데이트
- 사용자와 직접적인 인터랙션이 일어나지 않는 경우
- 예) 서버로부터 결과를 받아와서 보여주는 경우

import { startTransition } from "react";

// 긴급 업데이트: 입력한 글자를 화면에 보여주어야 함
setInputValue(input);

// 함수 내에 있는 모든 업데이트는 Transition 업데이트가 됨
startTransition(() => {
    // Transition 업데이트: 검색 결과를 보여주어야 함
    setSearchQuery(input);
});

Suspense

하위 컴포넌트(children)가 준비되기 전까지 렌더링을 중단하는 것

웹사이트 규모 ↑ / 컴포넌트 사이즈 ↑ / 로딩 시간 ↑

Code Splitting

Lazy Loading / Dynamic Loading

import { lazy, Suspense } from "react";
import LoadingSpinner from './LoadingSpinner';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent(props) {
    return (
        <Suspense fallback={LoadingSpinner />}>
            <OtherComponent />
        </Suspense>
    );
}

export default MyComponent;
// OtherComponent가 준비되기 전까지 
// fallback 속성에 들어가있는 LoadingSpinner라는 컴포넌트를 화면에 보여주고
// OtherComponent가 준비되면 그때 OtherComponent를 보여줌

클라이언트와 서버 렌더링 API 업데이트

리액트 DOM 클라이언트 변경사항

기존방식 (리액트 버전17)

import React from "react";
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

새로운 방식 (리액트 버전 18)

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

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

리액트 DOM 서버

renderToPipeableStream
- NodeJS 환경에서 스트리밍을 위한 함수
renderToReadableStream
- Edge runtime 환경(예: Deno, Cloudflare workers)을 위한 함수

새로운 Strict 모드 작동 방식

Strict Mode

언마운트(unmount) 시켰다가 다시 한 번 마운트(mount) 시킴

컴포넌트 생명주기 함수들이 예상과 다르게 여러번 호출 될 수 있음

새롭게 추가된 훅들

useId()

서버와 클라이언트에서 고유한 id값을 생성하기 위한 hook

list rendering시 map함수 내에서 반환하는 element key사용 용도는 아님

import { useId } from 'react';

function MyComponent() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>이름:</label>
      <input id={id} type="text" />
    </div>
  );
}

useTransitions()

긴급하지 않은 update를 위한 hook

import { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>카운트 증가</button>
      {isPending ? <p>업데이트 중...</p> : <p>카운트: {count}</p>}
    </div>
  );
}

useDeferredValue()

긴급하지 않은 update를 재렌더링 하는것을 연기할 수 있게 해주는 hook

짧은 시간에 한 가지 상태의 update가 여러번 발생 했을 경우 최종 상태값만 update하면 됨 (debouncing)

지연된 렌더링은 중단 가능하며 사용자의 입력을 차단하지 않음

import { useState, useDeferredValue } from 'react';

function MyComponent() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력한 텍스트: {deferredText}</p>
    </div>
  );
}

useSyncExternalStore()

외부 저장소를 구독 할 수 있게 해주는 hook

import { useSyncExternalStore } from 'react';

function useMyStore(selector) {
  return useSyncExternalStore(
    myStore.subscribe,
    () => selector(myStore.getState()),
    () => selector(myStore.getSnapshot())
  );
}

useInsertionEffect()

CSS-in-JS 라이브러리를 위한 hook

렌더링 과정에서 스타일 삽입의 성능 문제를 해결 할 수 있게 해줌

import { useInsertionEffect } from 'react';

function MyComponent() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .my-class {
        color: red;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return <div className="my-class">안녕하세요, 세계!</div>;
}

Mini Project

JunGi Jeong — Tue, 21 May 2024 23:03:41 +0900

미니 블로그 만들기

요구사항

글 목록 보기 기능 (리스트 형태)
글 보기 기능
댓글 보기 기능
글 작성 기능
댓글 작성 기능

화면 디자인

피그마 활용

프로젝트 생성하기

npx create-react-app mini-blog

프로젝트 디렉터리에 들어가서 앱 실행하기

cd mini-blog
npm start

필요한 패키지 설치

react-router-dom v6
- 리액트 앱에서 페이지 전환을 위해 사용
- 거의 모든 리액트 앱에 필수
styled-components v5
- 스타일링 라이브러리

npm install --save react-router-dom styled-components

주요 컴포넌트 및 폴더 구성하기

글 목록 보기 기능 (리스트 형태)
- PostList, PostListItem
글 보기 기능
- Post
댓글 보기 기능
- CommentList, CommentListItem
글 작성 기능
- PostWrite
댓글 작성 기능
- CommentWrite

폴더 구성

src
- component
  - list : 리스트와 관련된 Component들을 모아놓은 폴더
  - page : 페이지와 관련된 Component들을 모아놓은 폴더
  - ui : UI Component들을 모아놓은 폴더

UI Component 구현하기

필요한 UI Component

Button Component
Text Input Component

Button 컴포넌트 만들기

ui > Button.jsx

import React from "react";
import styeld from "styled-components";

const StyledButton = styeld.button`
    padding: 8px 16px;
    font-size: 16px;
    border-widht: 1px;
    border-radius: 8px;
    cursor: pointer;
`;

function Button(props) {
    const { title, onClick } = props;

    return <StyledButton onClick={onClick}>{title || "button"}</StyledButton>
}

export default Button;

TextInput 컴포넌트 만들기

ui > TextInput.jsx

import React from "react";
import styeld from "styled-components";

const StyledTextArea = styeld.textarea`
    width: calc(100% - 32px);
    ${(props) =>
        props.height &&
        `
        height: ${props.height}px;
    `}
    padding: 16px;
    font-size: 16px;
    line-height: 20px;
`;

function TextInput(props) {
    const { height, value, onChange } = props;

    return <StyledTextArea height={height} value={value} onChange={onChange} />;
}

export default TextInput;

List 컴포넌트 구현하기

PostListItem 컴포넌트 만들기

list > PostListItem.jsx

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
    width: calc(100% - 32px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid grey;
    border-radius: 8px;
    cursor: pointer;
    background: white;
    :hover {
        background: lightgrey;
    }
`;

const TitleText = styled.p`
    font-size: 20px;
    font-weight: 500;
`;

function PostListItem(props) {
    const { post, onClick } = props;

    return (
        <Wrapper onClick={onClick}>
            <TitleText>{post.title}</TitleText>
        </Wrapper>
    );
}

export default PostListItem;

PostList 컴포넌트 만들기

list > PostList.jsx

import React from 'react';
import styled from 'styled-components';
import PostListItem from './PostListItem';

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    :not(:last-child) {
        margin-bottom: 16px;
    }
`;

function PostList(props) {
    const { posts, onClickItem } = props;

    return (
        <Wrapper>
            {posts.map((post, index) => {
                return (
                    <PostListItem
                        key={post.id}
                        post={post}
                        onClick={() => {
                            onClickItem(post);
                        }}
                    />
                );
            })}
        </Wrapper>
    );
}

export default PostList;

CommentListItem 컴포넌트 만들기

ui > CommentListItem

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
    width: calc(100% - 32px);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid grey;
    border-radius: 8px;
    cursor: pointer;
    background: white;
    :hover {
        background: lightgrey;
    }
`;

const ContentText = styled.p`
    font-size: 16px;
    white-space: pre-wrap;
`;

function CommentListItem(props) {
    const { comment } = props;

    return (
        <Wrapper>
            <ContentText>{comment.content}</ContentText>
        </Wrapper>
    );
}

export default CommentListItem;

CommentList 컴포넌트 만들기

list > CommentList.jsx

import React from 'react';
import styled from 'styled-components';
import CommentListItem from './CommentListItem';

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    :not(:last-child) {
        margin-bottom: 16px;
    }
`;

function CommentList(props) {
    const { comments } = props;

    return (
        <Wrapper>
            {comments.map((comment, index) => {
                return (
                    <CommentListItem
                        key={comment.id}
                        comment={comment}
                    />
                );
            })}
        </Wrapper>
    );
}

export default CommentList;

더미 데이터 만들기

src > data.json

https://raw.githubusercontent.com/soaple/mini-blog/master/src/data.json

Page 컴포넌트 구현하기

MainPage 만들기

page > MainPage.jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import PostList from '../list/PostList';
import Button from '../ui/Button';
import data from '../../data.json';

const Wrapper = styled.div`
    padding: 16px;
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const Container = styled.div`
    width: 100%;
    max-width: 720px;

    :not(:last-child) {
        margin-bottom: 16px;
    }
`;

function MainPage(props) {
    const navigate = useNavigate();

    return (
        <Wrapper>
            <Container>
                <Button
                    title='글 작성하기'
                    onClick={() => {
                        navigate('/post-write');
                    }}
                />

                <PostList
                    posts={data}
                    onClickItem={(item) => {
                        navigate(`/post/${item.id}`);
                    }}
                />
            </Container>
        </Wrapper>
    );
}

export default MainPage;

PostWritePage 만들기

page > PostWritePage.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import TextInput from '../ui/TextInput';
import Button from '../ui/Button';

const Wrapper = styled.div`
    padding: 16px;
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const Container = styled.div`
    width: 100%;
    max-width: 720px;

    :not(:last-child) {
        margin-bottom: 16px;
    }
`;

function PostWritePage(props) {
    const navigate = useNavigate();

    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    return (
        <Wrapper>
            <Container>
                <TextInput
                    height={20}
                    value={title}
                    onChange={(event) => {
                        setTitle(event.target.value);
                    }}
                />

                <TextInput
                    height={480}
                    value={content}
                    onChange={(event) => {
                        setContent(event.target.value);
                    }}
                />

                <Button
                    title='글 작성하기'
                    onClick={() => {
                        navigate('/');
                    }}
                />
            </Container>
        </Wrapper>
    );
}

export default PostWritePage;

PostViewPage 만들기

page > PostViewPage.jsx

import React, { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';
import CommentList from '../list/CommentList';
import TextInput from '../ui/TextInput';
import Button from '../ui/Button';
import data from '../../data.json';

const Wrapper = styled.div`
    padding: 16px;
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const Container = styled.div`
    width: 100%;
    max-width: 720px;

    :not(:last-child) {
        margin-bottom: 16px;
    }
`;

const PostContainer = styled.div`
    padding: 8px 16px;
    border: 1px solid grey;
    border-radius: 8px;
`;

const TitleText = styled.p`
    font-size: 28px;
    font-weight: 500;
`;

const ContentText = styled.p`
    font-size: 20px;
    line-height: 32px;
    white-space: pre-wrap;
`;

const CommentLabel = styled.p`
    font-size: 16px;
    font-weight: 500;
`;

function PostViewPage(props) {
    const navigate = useNavigate();
    const { postId } = useParams();

    const post = data.find((item) => {
        return item.id == postId;
    });

    const [comment, setComment] = useState('');

    return (
        <Wrapper>
            <Container>
                <Button
                    title='뒤로 가기'
                    onClick={() => {
                        navigate('/');
                    }}
                />
                <PostContainer>
                    <TitleText>{post.title}</TitleText>
                    <ContentText>{post.content}</ContentText>
                </PostContainer>

                <CommentLabel>댓글</CommentLabel>
                <CommentList comments={post.comments} />

                <TextInput
                    height={40}
                    value={comment}
                    onChange={(event) => {
                        setComment(event.target.value);
                    }}
                />
                <Button
                    title='댓글 작성하기'
                    onClick={() => {
                        navigate('/');
                    }}
                />
            </Container>
        </Wrapper>
    );
}

export default PostViewPage;

각 페이지별 경고 구성하기

react-router-dom를 이용한 라우팅 구성 예시

<BrowserRouter>
    <Routes>
    	<Route index element={<Mainpage />} />
        <Route path="places" element={<PlacePage />} />
        <Route path="games" element={<GamePage />} />
    </Routes>
</BrowserRouter>

useNavigate()

function SampleNavigate(props) {
    const navigate = useNavigate();
    
    const moveToMain = () => {
    	navigate("/");
    }
    
    return (
    	...
    );
}

App.js 파일 수정하기

import React from "react";
import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";
import styled from "styled-components";
// Pages
import MainPage from './component/page/MainPage';
import PostWritePage from './component/page/PostWritePage';
import PostViewPage from './component/page/PostViewPage';

const MainTitleText = styled.p`
    font-size: 24px;
    font-weight: bold;
    text-align: center;
`;

function App(props) {
    return (
        <BrowserRouter>
            <MainTitleText>소플의 미니 블로그</MainTitleText>
            <Routes>
                <Route index element={<MainPage />} />
                <Route path="post-write" element={<PostWritePage />} />
                <Route path="post/:postId" element={<PostViewPage />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

cd mini-blog
npm start

Production 빌드하기

코드와 애플리케이션이 사용하는 이미지, CSS 파일 등의 파일을 모두 모아서 패키징 하는 과정

npm run build

serve 설치하기

npm install -g serve

serve 사용

serve -s build

References

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

Inje Lee (소플) | 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. ‍ 리액트의 세계로

www.inflearn.com

https://github.com/soaple/mini-blog

GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트

소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub.

github.com

https://reactrouter.com/

Home v6.23.1 | React Router

reactrouter.com

Styling

JunGi Jeong — Wed, 8 May 2024 23:06:49 +0900

CSS와 selector

Cascading Style Sheets

웹페이지의 디자인, 레이아웃 및 스타일을 정의하기 위한 언어

h1 { color: green; font-size: 16px; }

h1 : Selector(선택자)
color, font-size : property(속성)
green, 16px : Value(값)

color: green; / font-size: 16px; => Declaration(선언)

Selector의 유형

유형	Element	ID	Class	Universal	Grouping
	h1 { color: green; }	<div id="section"> ... </div>	<span class="medium"> ... </span> <p class="medium"> ... </p>	* { font-size: 20px; color: blue; }	h1, h2, p { color:black; text-align: center; }
		#section { background-color: black; }	.medium { font-size: 20px; } p.medium { font-size: 20px; }

Element의 상태와 관련된 selector

:hover
- 마우스 커서가 element 위에 올라왔을 때
:active
- 주로 <a> 태그(link)에 사용, element가 클릭됐을 때를 의미
:focus
- 주로 <input> 태그에 사용, element가 초점을 갖고 있을 경우
:checked
- radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우
:first-child, :last-child
- 상위 element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미

레이아웃과 관련된 CSS 속성

레이아웃 : 구성 요소의 배치

웹 화면에 요소들을 어떻게 배치할 것인가.

display 속성

div {
	display: none | block | inline | flex;
}

display: none;
- element를 화면에서 숨기기 위해 사용
- <script> 태그의 display 속성 기본값은 display: none;
display: block;
- 블록 단위로 element를 배치.
- <p>, <div>, <h1>~<h6> 태그의 display 속성 기본값이 display: block;
display: inline;
- element를 라인 안에 넣는 것.
- <span> 태그의 display 속성 기본값이 display: inline;
display: flex;
- element를 블록 레벨의 flex container로 표시.
- container이기 때문에 내부에 다른 element들을 포함.

visibility 속성

div {
	visibility: visible | hidden;
}

visibility속성의 대표적인 값들

visibility: visible;
- element를 화면에 보이게 하는 것
visibility: hidden;
- 화면에서 안 보이게 감추는 것
- element를 안 보이게만 하는 것이고, 화면에서의 영역은 그대로 차지.

position 속성

div {
	position: static | fixed | relative | absolute;
}

position속성의 대표적인 값들

static
- 기본값으로 element를 원래의 순서대로 위치시킴
fixed
- element를 브라우저 window에 상대적으로 위치시킴
relative
- element를 보통의 위치에 상대적으로 위치시킴
absolute
- element를 절대 위치에 위치시킴

가로, 세로 길이와 관련된 속성

div {
    width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-height: auto | value;
}

FlexBox

div {
    display: flex;
    flex-direction: row | column | row-reverse | column-reverse;
    align-items: stretch | flex-start | center | flex-end | baseline;
    justify-content: flex-start | center | flex-end | space-between | space-around;
}

FlexBox이해를 돕기 위한 사이트 ~~(개구리 옮기다 보면 이해 됨)~~

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성

#title {
    font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>;
    font-size: value;
    font-weight: normal | bold;
    font-style: normal | italic | oblique;
}

// font-family (글꼴)
#title1 {
    font-family: "Times New Roman", Times, serif;
    // 순서대로 해당 폰트가 없을 시에 대비한 폰트, 뒤로 갈수록 일반적
}

// font-size (크기)
px(pixel), em, rem, vw(viewport width)
16 * em = pixels
#title1 {
    font-size: 16px;
    font-size: 1em;
    font-size: 10vw; /* viewport 가로 길이의 10%를 의미 */
}

// font-weight (두께)
#title1 {
    font-weight: bold;
    font-weight: 500;
}

// font-style (모양)
#title1 {
    font-style: italic;
    font-style: oblique;
}

// 기타
div {
    background-color: color | transparent;
    border: border-width border-style border-color;
}

styled-components

React와 React Native 애플리케이션에서 스타일링을 쉽게 할 수 있도록 도와주는 라이브러리입니다.
이 라이브러리는 CSS를 JavaScript로 작성할 수 있게 해주며, 컴포넌트 기반 개발 패턴과 잘 어울립니다.

설치방법

#npm 사용
npm install --save styled-components
// 만약 cannot read properties of null (reading 'usecontext') 에러 발생 시
// npm uninstall styled-components 후
// npm install styled-components@5.3.10 등 최신버전으로 재설치 요망
// 본인이 겪었음...

# yarn 사용
yarn add styled-components

예제 코드

import React from "react";
import styled from 'styled-components';


const Wrapper = styled.div`
    padding: 1em;
    background: grey
`;

const Title = styled.h1`
    font-size: 1.5em;
    color: white;
    text-align: center;
`

function Mainpage(props) {
    return (
        <Wrapper>
            <Title>
                안녕, 리액트!
            </Title>
        </Wrapper>
    )
}

export default Mainpage;

기본 사용법

Tagged Template Literals

literal : 소스 코드의 고정된 값 / let number = 20; (20 ==> literal)
styled-components는 ES6의 템플릿 리터럴(tagged template literals)을 사용하여 스타일을 정의합니다.
이는 CSS를 직접 자바스크립트 파일 안에 작성할 수 있게 해줍니다.

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

props 사용

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

function Sample(props) {
	return (
    	<div>
            <Button>Normal</Button>
            <Button dark>Dark</Button>
        </div>
    )
}

export default Sample;

styled-components의 스타일 확장

// 1. 기본 버튼 컴포넌트 정의
import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export default Button;

// 2. 기본 버튼 컴포넌트를 확장

import styled from 'styled-components';
import Button from './Button';

const LargeButton = styled(Button)`
  font-size: 1.5em;
  padding: 0.5em 1.5em;
`;

const PrimaryButton = styled(Button)`
  background: blue;
  border: 2px solid blue;
`;

export { LargeButton, PrimaryButton };

// 3. 확장된 컴포넌트 사용

import React from 'react';
import Button from './Button';
import { LargeButton, PrimaryButton } from './ExtendedButtons';

const App = () => (
  <div>
    <Button>Default Button</Button>
    <LargeButton>Large Button</LargeButton>
    <PrimaryButton>Primary Button</PrimaryButton>
  </div>
);

export default App;

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

www.inflearn.com

https://www.w3schools.com/css/css_selectors.asp

CSS Selectors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.w3schools.com/cssref/css_selectors.php

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

https://www.w3schools.com/csSref/index.php

CSS Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://developer.mozilla.org/en-US/docs/web/javascript/reference/template_literals

Template literals (Template strings) - JavaScript | MDN

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

developer.mozilla.org

https://styled-components.com/docs

styled-components: Documentation

Learn how to use styled-components and to style your apps without stress

styled-components.com

https://github.com/soaple/first-met-react-practice/blob/master/src/chapter_15/Blocks.jsx

first-met-react-practice/src/chapter_15/Blocks.jsx at master · soaple/first-met-react-practice

소플의 처음 만난 리액트 실습 소스코드. Contribute to soaple/first-met-react-practice development by creating an account on GitHub.

github.com

https://velog.io/@pcs/styled-component-%EC%98%A4%EB%A5%98

styled-component 오류??

styled-component를 사용하면서 마주친 오류SWIPE GAME을 만들기 위해서 그냥 바탕 화면먼저 그려볼려고 이렇게 작성했었다.정말 간단하게 위 처럼 배경전체를 \`\`\`cannot read properties of null (reading 'usecont

velog.io

Context

JunGi Jeong — Tue, 30 Apr 2024 20:42:50 +0900

Context란?

기존에는 컴포넌트의 props를 통하여 단 방향 데이터 전달되었다.

여러 컴포넌트를 거쳐 자주 사용되는 데이터의 경우 코드의 복잡성과 불편함을 야기한다.

이를 개선하고자 Context를 사용한다.

Component Tree를 통해 직접적으로 전달하여 위 문제점을 해결

React Context

언제 Context를 사용해야 할까?

여러 개의 Component들이 접근해야 하는 데이터

ex) 로그인 여부, 로그인 정보, UI테마, 현재 언어 등...

Context 적용 전

function App(props) {
    return <Toolbar theme="dark" />;
}

function Toolbar(props) {
    // 이 Toolbar 컴포넌트는 ThemedButton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 합니다.
    // 현재 테마를 알아야 하는 모든 버튼에 대해서 props로 전달하는 것은 굉장히 비효율적입니다.
    return (
      <div>
        <ThemedButton theme={props.theme} />
      </div>
    );
  }
  
  function ThemedButton(props) {
    return <Button theme={props.theme} />
  }

Context 적용 후

// 컨텍스트는 데이터를 매번 컴포넌트를 통해 전달할 필요 없이 컴포넌트 트리로 곧바로 전달하게 해줍니다.
// 여기에서는 현재 테마를 위한 컨텍스트를 생성하며, 기본값은 'light'입니다.
const ThemeContext = React.createContext('light');

function App(props) {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

// 이제 중간에 위치한 컴포넌트는 테마 데이털르 하위 컴포넌트로 전달할 필요가 없습니다.
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemeButton(props) {
    // 리액트는 가장 가까운 상위 테마 Provider를 찾아서 해당되는 값을 사용합니다.
    // 만약 해당되는 Provider가 없을 경우 기본값(여기에서는 'light')을 사용합니다.
    // 여기에서는 상위 Provider가 있기 때문에 현재 테마의 값은 'dark'가 됩니다.

    return (
        <ThemeContext.Consumer>
            {value => <Button theme={value} />}
        </ThemeContext.Consumer>
    );
}

Context를 사용하기 전에 고려할 점

Context의 주 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것

Context 사용시 재사용하기 어려워 지기에 필요시에만 사용

여러 레벨에 걸쳐 props를 넘기는 것을 대체하기에 컴포넌트 합성이 더 간단할 수 도 있음

// Page컴포넌트는 PageLayout컴포넌트를 렌더링
<Page user={user} avatarSize={avatarSize} />

// PageLayout컴포넌트는 NavigationBar 컴포넌트를 렌더링
<PageLayout user={user} avatarSize={avatarSize} />

// NavigationBar 컴포넌트는 Link컴포넌트를 렌더링
<NavigationBar user={user} avatarSize={avatarSize} />

// Link컴포넌트는 Avatar컴포넌트를 렌더링
<Link href={user.permalink}>
    <Avatar user={user} size={avatarSize} />
</Link>

컴포넌트 합성 예제

function Page(props) {
    const user = props.user;

    const userLink = (
        <Link href={user.permalink}>
            <Avatar user={user} size={props.avatarSize} />
        </Link>
    );

    // Page 컴포넌트는 PageLayout 컴포넌트를 렌더링
    // 이때 props로 userLink를 함께 전달함
    return <PageLayout userLink={userLink} />;
}

// PageLayout 컴포넌트는 NavigationBar 컴포넌트를 렌더링
<PageLayout userLink={...} />

// NavigationBar 컴포넌트는 props로 전달받은 userLink element를 리턴
<NavigationBar userLink={...} />

컴포넌트 합성 예제2

function Page(props) {
    const user = props.user;

    const topBar = (
        <NavigationBar>
            <Link href={user.permalink}>
                <Avatar user={user} size={props.avatarSize} />
            </Link>
        </NavigationBar>
    );
    const content = <Feed user={user} />;
    
    return (
        <PageLayout // 하위 컴포넌트를 여러 개의 변수로 나눠서 전달!
            topBar={topBar}
            content={content}
        />
    );
}

Context API

Context 생성

만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용 됨

기본 값으로 undefined를 넣으면 기본값이 사용되지 않

const MyContext = React.createContext(기본값);

Context.Provider

Provider 사용

<MyContext.Provider value={/* some value */}>

/*
Provider Component로 감싸진 모든 Consuming Component는
Provider의 value prop이 바뀔 때 마다 재 렌더링 된다.
값이 변경되었을때 상위 컴포넌트가 변경 대상이 아니더라도
하위에 있는 컴포넌트가 Context를 사용한다면
하위 컴포넌트에서는 업데이트가 일어난다.
값의 변화 기준은 Reference의 MDN참조
*/

Provider value에서 주의 사항

// Provider 컴포넌트가 재렌더링될 때마다
// 모든 하위 consumer 컴포넌트가 재렌더링 됨
function App(props) {
    return (
        <MyContext.Provider value={{ something : 'something'}}>
            <ToolBar />
        </MyContext.Provider>
    );
}

// state를 사용하여 불필요한 재렌더링을 막음
function App(props) {
    const [value, setValue] = useState({ something : 'something'});

    return (
        <MyContext.Provider value={value}>
            <ToolBar />
        </MyContext.Provider>
    );
}

Class.context

provider하위에 있는 클래스 컴포넌트에서 context 데이터에 접근하기 위해 사용

class MyClass extends React.Component {
    componentDidMount() {
        let value = this.context;
        /* MyContext의 값을 이용하여 원하는 작업을 수행 가능 */
    }
    componentDidUpdate() {
        let value = this.context;
        /* ... */
    }
    componentWillUnmount() {
        let value = this.context;
        /* ... */
    }
    render() {
        let value = this.context;
        /* MyContext의 값에 따라서 컴포넌트들을 렌더링 */
    }
}

MyClass.contextType = MyContext;

Context.Consumer

// Component의 자식으로 함수가 올 수 있는데 이를 function as a child라 한다.
<MyContext.Consumer>
    {value => /* 컨텍스트의 값에 따라서 컴포넌트들을 렌더링 */}
</MyContext.Consumer>

Function as a child

// children이라는 prop을 직접 선언하는 방식
<Profile children={name => <p>이름 : {name}</p>} />

// Profile 컴포넌트로 감싸서 children으로 만드는 방식
<Profile>{name => <p>이름 : {name}</p>}</Profile>

Context.displayName

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

// 개발자 도구에 "MyDisplayName.Provider"로 표시됨
<MyContext.Provider />

// 개발자 도구에 "MyDisplay.Consumer"로 표시됨
<MyContext.Consumer />

여러 개의 Context 사용하기

Context.Provider의 중첩

// 테마를 위한 컨텍스트
const ThemeContext = React.createContext('light');

// 로그인한 유저 정보를 담는 UserContext
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // context 초기값을 제공하는 App 컴포넌트
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// 여러 context의 값을 받는 컴포넌트
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

useContext()

useContext() Hook을 사용한 예시

import { useContext } from "react";

function MyComponent(props) {
    const value = useContext(MyComponent);

    return (
        ...
    )
}

// 올바른 사용법
useContext(MyContext);

// 잘못된 사용법
useContext(MyContext.Consumer);
useContext(MyContext.Provider);

Reference

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

www.inflearn.com

https://ko.legacy.reactjs.org/docs/context.html#gatsby-focus-wrapper

Context – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Object.is() - JavaScript | MDN

The Object.is() static method determines whether two values are the same value.

developer.mozilla.org

Composition vs Inheritacne

JunGi Jeong — Mon, 29 Apr 2024 22:31:43 +0900

Composition

여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 (합성)

Containment

하위 컴포넌트를 포함하는 형태의 합성 방법

Sidebar나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.

이러한 컴포넌트에는 특수한 children prop을 사용하여 자식 엘리멘트를 출력에 그대로 전달하는 것이 좋다.

// children이라는 prop을 사용해서 조합
// children prop을 사용한 FancyBorder 컴포넌트
function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    );
}

React.createElement(
    type,
    [props],
    [...children]
);

// FancyBorder 컴포넌트 안에 있는 모든 JSX 태그는 children으로 전달됨!
function WelcomeDialog(props) {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          Welcome
        </h1>
        <p className="Dialog-message">
          Thank you for visiting our spacecraft!
        </p>
      </FancyBorder>
    );
  }

여러 개의 children 집합이 필요한 경우 별도로 props를 정의해 각각 원하는 컴포넌트를 넣어주면 됨

function SplitPane(props) {
    return (
      <div className="SplitPane">
        <div className="SplitPane-left">
          {props.left}
        </div>
        <div className="SplitPane-right">
          {props.right}
        </div>
      </div>
    );
  }
  
  function App(props) {
    return (
      <SplitPane
        left={
          <Contacts />
        }
        right={
          <Chat />
        } />
    );
  }

Specialization

특수화

범용적인 개념을 구별이 되게 구체화 하는 것

WelcomeDialog는 Dialog의 특수한 경우라고 할 수 있다.

객체지향의 경우 상속(Inheritance)을 통해 Specialization을 구현하나

React의 경우 합성(Containment)을 사용하여 Specialization을 구현한다.

// 더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링하고 props를 통해 내용을 구성한다.
function Dialog(props) {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          {props.title}
        </h1>
        <p className="Dialog-message">
          {props.message}
        </p>
      </FancyBorder>
    );
  }
  
  function WelcomeDialog(props) {
    return (
      <Dialog
        title="Welcome"
        message="Thank you for visiting our spacecraft!" />
    );
  }

Containment와 Specialization을 같이 사용하기

import { useState } from "react";

function Dialog(props) {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          {props.title}
        </h1>
        <p className="Dialog-message">
          {props.message}
        </p>
        {props.children}
      </FancyBorder>
    );
  }

  function SignUpDialog(props) {
    const [nickname, setNickname] = useState('');

    const handleChange= (event) => {
        setNickname(event.target.value);
    }

    const handleSignUp = () => {
        alert('어서 오세요, ${nickname}님!');
    }

    return (
        <Dialog
        title="화성 탐사 프로그램"
        message="닉네임을 입력해 주세요.">
        <input
            value={nickname}
            onChange={handleChange} />
        <button onClick={handleSignUp}>
            가입하기
        </button>
        </Dialog>
    );
  }

Inheriatance

상속

다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것

Meta에서 상속보다 합성을 추천

복잡한 컴포넌트를 쪼개서
여러 개의 컴포넌트로 만들고,
만든 컴포넌트를 조합해서
새로운 컴포넌트를 만들자!

Reference

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

www.inflearn.com

https://ko.legacy.reactjs.org/docs/composition-vs-inheritance.html

합성 (Composition) vs 상속 (Inheritance) – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://github.com/soaple/first-met-react-practice/tree/master/src/chapter_13

first-met-react-practice/src/chapter_13 at master · soaple/first-met-react-practice

소플의 처음 만난 리액트 실습 소스코드. Contribute to soaple/first-met-react-practice development by creating an account on GitHub.

github.com

Lifting State Up

JunGi Jeong — Wed, 24 Apr 2024 23:46:40 +0900

여러개의 컴포넌트들 사이에서 State를 공유하는 방법

Shared State

State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 사용

하나의 데이터를 여러 개의 컴포넌트에서 표현

하위 컴포넌트에서 State 공유하기

물의 끓음 여부를 나타내는 컴포넌트를 만들어 보자

import { useState } from "react";

function BoilingVerdict(props) {
    if(props.celsius >= 100) {
        return <p>물이 끓습니다.</p>;
    }
    return <p>물이 끓지 않습니다.</p>;
}

function Calculator(props) {
    const [temperature, setTemperature] = useState('');

    const handleChange = (event) => {
        setTemperature(event.target.value);
    }

    return (
        <fieldset>
            <legend>섭씨 온도를 입력하세요 : </legend>
            <input value={temperature}
            onChange={handleChange} />
            <BoilingVerdict
            celsius={parseFloat(temperature)} />
        </fieldset>
    )
}

입력 컴포넌트 추출하기

function TemperatureInput(props) {
    const [temperature, setTemperature] = useState('');

    const handleChange = (event) => {
        setTemperature(event.target.value);
    }

    return (
        <fieldset>
            <legend>온도를 입력해 주세요(단위:{scaleNames[props.scale]}):</legend>
            <input value={temperature}onChange={handleChange} />
            celsius={parseFloat(temperature)} />
        </fieldset>
    )
}

function Calculator(props) {
    return (
        <div>
            <TemperatureInput scale="c" />
            <TemperatureInput scale="f" />
        </div>
    );
}

온도 변환 함수 작성하기

function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
    const input = parseFloat(temperature);
    if (Number.isNaN(input)) {
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}

tryConvert('abc', toCelsius);       // empty string을 리턴
tryConvert('10.22', toFahrenheit)   // '50.396'을 리턴

Shared State 적용하기

function TemperatureInput(props) {
   ...
    return (
            // 변경 전 : <input value={temperature}onChange={handleChange} />
            <input value={props.temperature}onChange={handleChange} />
   ...
    )
}

const handleChange = (event) => {
        // 변경 전 : setTemperature(event.target.value);
        props.onTemperatureChange(event.target.value);
    }
    
function TemperatureInput(props) {
    const handleChange = (event) => {
        props.onTemperatureChange(event.target.value);
    }

    return (
        <fieldset>
            <legend>온도를 입력해 주세요(단위:{scaleNames[props.scale]}):</legend>
            <input value={props.temperature}onChange={handleChange} />
        </fieldset>
    )
}

Calculator 컴포넌트 변경하기

function Calculator(props) {
    const [temperature, setTemperatrue] = useState('');
    const [scale, setScale] = useState('c');

    const handleCelsiusChange = (temperature) => {
        setTemperatrue(temperature);
        setScale('c');
    }

    const handleFahrenheitChange = (temperature) => {
        setTemperatrue(temperature);
        setScale('f');
    }

    const celsius = scale == 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale == 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
        <div>
            <TemperatureInput
            scale="c"
            temperature={celsius}
            onTemperatureChange={handleCelsiusChange} />
            <TemperatureInput
            scale="f"
            temperature={fahrenheit}
            onTemperatureChange={handleFahrenheitChange} />
            <BoilingVerdict
            celsius={parseFloat(celsius)} />
        </div>
    )
}

소플님의 강의 자료 이미지

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

www.inflearn.com

https://ko.legacy.reactjs.org/docs/lifting-state-up.html

State 끌어올리기 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://react.dev/learn/sharing-state-between-components

Sharing State Between Components – React

The library for web and native user interfaces

react.dev

https://github.com/soaple/first-met-react-practice/tree/master/src/chapter_12

first-met-react-practice/src/chapter_12 at master · soaple/first-met-react-practice

소플의 처음 만난 리액트 실습 소스코드. Contribute to soaple/first-met-react-practice development by creating an account on GitHub.

github.com