• 나쁜 코드에 주석을 달지 마라. 새로 짜라. - 브라이언 W. 커니핸, P.J. 플라우거 (p.68)

• "이런! 주석을 달아야겠다!" 아니다! 코드를 정리해야 한다! (p.69)

• 많은 경우 주석으로 달려는 설명을 함수로 만들어 표현해도 충분하다. (p.70)

• 어떤 용도로 사용하든 시스템에 나쁜 코드를 남겨 놓는 핑계가 되어서는 안 된다. (p.74-75)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

• 주석에도 종류가 많다. 하지만 결국 대부분이 나쁜 주석이다.

• '주석은 나쁘다.'의 매우 다양한 표현이 인상적이다. (저자가 주석을 얼마나 싫어하는 건지 가늠할 수 없다.)

• 주석을 없앨 수 있는 방법은 주석으로 하고 싶은 말을 코드로 하는 것이다.

• 책의 장을 거듭할 수록 예제의 나쁜 점이 잘 보인다. 예전의 나였다면 '음, 그래..' 하면서 넘어갔을 코드들이다.

• 작게! 더 작게! (p. 42)

• 각 함수가 이야기 하나를 표현했다. 각 함수가 너무도 멋지게 다음 무대를 준비했다. (p. 43)

• 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다. (p. 44)

• 플래그 인수는 추하다. (p. 52)

• 인수 2개는 한 값을 표현하는 두 요소다. 두 요소에는 자연적인 순서도 있다. (p. 52)

• 부수 효과는 거짓말이다. 어느 쪽이든 교활하고 해로운 거짓말이다. (p. 54)

• 함수 선언부를 찾아보는 행위는 코드를 보다가 주춤하는 행위와 동급이다. 인지적으로 거슬린다는 뜻이므로 피해야 한다. (p. 56)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

• 기본 객체를 가지는데 Object.assign을 사용하는 것을 간과하고 있었다.

• 여태 2개 이상의 인수의 순서를 외우는 걸 너무도 당연하게 생각하고 있었다.

• 새로운 부분이 정말 많다. 그만큼 내가 좋지 않는 방법으로 함수를 써왔다는 것이겠지. 위의 기억하고 싶은 내용들은 전부 내가 하지 못했던 행위이다.

• 좋은 이름을 지으려면 시간이 걸리지만 좋은 이름으로 절약하는 시간이 훨씬 더 많다. (p.22)
• 존재 이유는? 수행 기능은? 사용 방법은?. (p.22)
• 프로그래밍은 사회 활동이기 때문이다. (p.27)
• 의미를 해독할 책임이 독자에게 있는 논문 모델이 아니라 의도를 밝힐 책임이 저자에게 있는 잡지 모델이 바람직하다. (p.34)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

• 너무 재밌다!
• 긴 이름을 짓는 게 괜찮을까 고민한 적이 여러 번 있었는데, 짧은 이름으로 이해하지 못하는 것 보다 긴 이름으로 한 번에 이해할 수 있는 편이 더 좋다는 확신을 받았다!
• 저자와 독자, 사회 활동이라는 단어로 프로그래밍을 설명하니 새로운 이해가 생겼다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

익숙하지 않은 클래스, 메서드 개념이 있어 읽는 데 오래 걸렸다. (이참에 개념은 알아둬야지)

타입스크립트란, Javascript를 기반으로 한 strongly-typed 언어이다. strongly-typed이란, 프로그래밍 언어가 작동하기 전에 type을 확인 하는 것이다.

아래의 예제 코드를 보자.

const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
}

console.log(user.name); // undefined

해당 코드를 실행시키면 user에는 name이 없지만 에러는 나지 않고 undefined를 출력한다. 이 코드가 실제 사용자가 있는 사이트에서 실행이 된다면 사용자는 "안녕하세요, undefined님"이란 문구를 보게 될지도 모른다. 이런 Javascript의 모자란 능력을 커버하기 위해 타입스크립트 사용이 권장된다.

하지만 웹 브라우저는 Javascript 외의 언어를 읽을 수 없다. 그럼 타입스크립트는 어떻게 인식하는 걸까?

타입스크립트는 브라우저에 프로그램이 실행 되기 전에 코드를 분석한다. 분석 후 에러 사항이 있다면 프로그램 실행을 막고, 에러 사항이 없다면 JS 코드를 return하여 프로그램을 실행 시킨다.

설치

프로젝트 작업 도중에 타입스크립트를 추가하고 싶다면 아래 코드로 필요한 모듈을 설치한다.

npm install typescript @types/node @types/react @types/react-dom @types/jest

설치 후 tsconfig.json 파일이 추가 되었는지도 확인해준다. 없다면 tsc --init 으로 추가하여 설정해주자.

참고 : tsconfig.json 설정 총정리

따로 모듈을 설치하는게 번거롭다면 아래 코드로 프로젝트를 아예 처음부터 시작하는 방법이 있다.

npx create-react-app my-ts-app --tamplate typescript

타입스크립트 환경에서 작업하면서 다른 모듈을 설치할 때는 @types 처럼 타입 선언이 되어 있는지 확인을 해야한다. npm install 로 간단히 확인할 수 있다.

npm install @types/모듈명

모듈명만 변경하여 install 해보면 타입스크립트 선언이 된 모듈인지 아닌지 바로 확인이 가능하다.

시작

타입스크립트라 한들 JS와 크게 다르지 않다. 표면적으론 타입을 지정해주는게 다를 뿐이다. 타입을 지정할 때는 아래와 같은 방법을 쓸 수 있다.

직접 타입 지정

콜론( : )을 사용하여 직업 타입을 지정할 수 있다.

const plus = (a:number, b:number) => a + b;

interface

인터페이스 선언은 객체의 모양(object's shape)을 설명한다. 인터페이스가 정의된 컴포넌트나 함수는 인터페이스에 있는 props를 반드시 준수해야 한다.

interface BoxProps {
  bgColor: string;
  borderColor?: string; // string | undefined - optional prop
}

function Box({ bgColor, borderColor }: BoxProps) {
  return <Container bgColor={bgColor] borderColor={borderColor ?? bgColor] />;
}

// or
function Box(props: BoxProps) {
  return <Container bgColor={props.bgColor} borderColor={props.borderColor} />;
}

// App.tsx
function App(){
  return <div>
      <Box bgColor="tomato" borderColor="black" />
    <Box bgColor="teal" />
  </div>;
}

useSate

const [value, setValue] = useState<number | string>(0);

setValue(3);
setValue("hello");
// setValue(true); Error

useSate에서 초기값을 지정할 경우, 타입을 지정하지 않아도 초기값의 데이터 타입에 따라 앞으로의 value 값을 유추한다. 초기값을 지정하지 않으면 타입은 undefined가 되며, 드물게 복수의 타입이 들어오게 될 경우 <number | string>처럼 지정해준다.

event type

function App(){
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello", value);
  };

  return (
    <form onSubmit={onSubmit}>
      <input value={value} onChange={onChange} type="text" placeholder="username" />
      <button type="submit">Log in</button>
    </form>
  );
}

event 객체를 사용할 때도 타입을 지정해주어야 한다.

React.FormEvent<HTMLInputElement>;

위 코드는 _리액트의. 폼에서. input에 의해 일어나는 이벤트_를 의미한다. 복잡해서 바로 외우진 못하지만 보통 vscode에서 이벤트(onChange, onClick, onSubmit 등)에 커서를 올리면 친절하게 알림이 뜬다.

참고로 FormEvent와 ChangeEvent의 속성은 동일하다.

다른 리엑트 이벤트가 궁금하다면 'SyntheticEvent 가이드'를 참고하자.

styled-components theme

타입스크립트에서 styled-components를 사용하려면 npm을 따로 설치해주어야 한다.

npm install --save-dev @types/styled-components

그리고 좀 더 효율적으로 사용하기 위해 선언 파일(declarations file)을 만들어 준다. 선언 파일을 생성해주면 어떤 값이 들어가는지 미리 확인이 가능하다. "파일명.d.ts" 처럼 파일명을 지정해준다.

// styled.d.ts
import "styled-components";

declare module "styled-components" {
  // Theme interface
  export interface DefaultTheme {
    borderRadius: string;
    colors: {
      main: string;
      secondary: string;
    };
  }
}

작성한 interface를 기반으로 테마나 레이아웃 등 스타일을 선언한다.

// theme.ts
import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = {
  borderRadius: "12px",
  colors: {
    main: "#222",
    secondary: "#eee",
  },
};

export const darkTheme: DefaultTheme = {
  borderRadius: "12px",
  colors: {
    main: "#fefefe",
    secondary: "#aaa",
  },
};

참고 : styled-components#typescript

리액트에는 여러 스타일링 방법이 있다.

1. inline style
2. stylesheet with className
3. css module
4. CSS-in-JS

CSS-in-JS 방법을 많이 사용하며 그 중에서도 대중적으로 사용하는 styled-components에 대해 알아보겠다.

설치

npm i styled-components

시작

먼저 styled-components를 import 한다.

import styled from "styled-components";

styled.button을 생성한다. styled.<태그> 해당 <태그>부분에 html 태그 이름을 넣음으로서 생성이 가능하다. 태그 뒤에는 백틱( ` )을 쓰며 그 안에 스타일을 정의해준다. 스타일은 Scss 정의가 가능하다.

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

vscode에서 사용중이라면 아래 extension을 설치해주면 편하다. vscode-styled-components

React 컴포넌트처럼 작성한다.

function App() {
  return (
      <Btn>Log in</Btn>
  );
}

HTML 랜덤한 클래스가 부여되어 스타일이 입혀진다.

<button class="sc-OKtSx hLMzlZ">Log in</button>

스타일 확장

먼저 정의된 스타일 컴포넌트의 스타일을 상속받아 사용이 가능하다.

const Box = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`
  border-radius: 50px;
`;

<Box />
<Circle />

props

스타일 내부에서 props 사용이 가능하다.

const Box = styled.div`
  background-color: ${props => props.bgColor};
`;

<Box bgColor="teal" />
<Box bgColor="tomato" >


const Box = styled.div`
  background-color: ${props => (props.invalid ? 'teal' : 'tomato')}
`;

<Box invalid={isValid} />


const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

<Input />

// in HTML
<input required="" class="sc-kuWgmH cqgciL">

"as" prop

컴포넌트에 as 속성을 사용하여 스타일은 유지하되 태그 타입만 변경이 가능하다.

const Btn = styled.button`
  border: 2px solid tomato;
  color: tomato;
`;

<Btn>Button</Btn>
<Btn as="a" href="/">Link with Btn style</Btn>


const Component = styled.div`
  color: red;
`;

<Component as="button" onClick={() => alert('It works!')}>
  Hello World!
</Component>

Selector

Scss 방식으로 selector 지정이 가능하다.

Class Name

const Box = styled.div`
  background-color: teal;

  &.isvalid {
    background-color: tomato;
  }
`;

<Box className={isValid && "isvalid"} />

Component Selector

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  background-color: tomato;

  ${Emoji} {
    &:hover {
      font-size: 56px;
    }
  }
`;

<Box>
  <Emoji>😀</Emoji>
</Box>

Animation

animation을 사용하기 위해선 'keyframes'를 불러와야 한다.

import styled, { keyframes } from "styled-components";

그리고 컴포넌트 생성과 비슷하게 작성해준다.

const rotateAnimate = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;

const Box = styled.div`
  animation: ${rotateAnimate} 1s linear infinite;
`;

export하여 다른 곳에서 import하여 사용할 수도 있다.

Themes

styled-components는 테마 기능을 지원한다. index.js에서 ThemeProvider를 import하여 사용 가능하다.

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";
import App from "./App";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

// App.js
import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Wrapper = styled.div`
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

기본적인 설정 방법이며 다크 모드와 라이트 모드의 속성명이 동일해야 한다.

참고 : styled-components docs

코드펜 행맨 게임

목표

• 플로우 차트를 작성해 보자.
• ES6를 최대한 활용해 보자.
• canvas를 사용해 보자.

플로우 차트

플로우 차트는 노션으로 작성하였다. 작성하고 보니 로직을 정리하는데 많은 도움이 되었다. 함수 작성하는 순서도 헤매지 않고 쭉 작성할 수 있었다. 그러라고 있는 거지만 새삼 편리성을 느꼈달까.

노션 플로우 차트

간략하게 작성해 보자면,

1. 게임 시작
2. 알파벳 버튼 클릭
3. 정답 단어 스펠링과 비교(true/false)
4. 맞으면 스펠링 표시, 틀리면 목숨 1 차감 & 행맨 그리기
5. 단어 스펠링을 전부 맞추면 게임 종료
6. 목숨이 0이면 게임 종료, 0이 아니면 2번으로 돌아감
   2번~6번 과정이 반복
7. 힌트 버튼 클릭 시 힌트 팝업 표시
8. 다시하기 클릭 시 게임 재시작, 1번으로 돌아감

여기서 세부 사항이 여러 갈래로 나뉘니 복잡하게 되었다. 다른 사람이 쓴 플로우 차트를 참고 해보기도 했지만 반복되는 부분이라든지 어떻게 수정해야 더 간결하게 보일지 (노션으로만 해서 그런 건지...)잘 모르겠더라. 피드백이 있는 분은 자유롭게 댓글 남겨주시길 부탁드린다.

코드

코드펜을 참고하여 작성하면서 좀 더 예쁘게 바꿀 수 있는 부분과 ES6 문법을 사용할 수 있는 부분은 수정하였다. 확실히 실제로 코드를 짜니까 습득이 훨씬 수월했다. 플로우 차트와 조금 다른 부분도 추가되었다(필요 없을 거로 생각했던 맞춘 스펠링 개수 파악 부분이 추가되었다.). 다음에는 사용자가 원하는 데이터를 넣고 사용할 수 있게 플러그인 식으로 써보면 좋겠다는 생각도 들었지만 그건 시간이 된다면 진행해 보기로 한다.

사용한 ES6

const 와 let

const alphabet = ["a", "b", "c", ...];

let topic, word, hint, lives, letterBtn, blanks, correctCounter, drawOrder;

화살표 함수

const frame1 = () => draw(0, 130, 300, 130);

Template Literals ( ` )

topicText.innerHTML = `주제는 ${topic}입니다.`;

구조분해할당

({ topic, word, hint } = randomData);

Spread(전개)

if ([...word].indexOf(guessLetter) != -1) {
    // true
    [...word].forEach((correctLetter, i) => {
         if (correctLetter == guessLetter) {
            blanks[i].innerHTML = correctLetter;
            correctCounter += 1;
            correctCounter == word.length && gameClear();
        }
    });
}

Canvas

canvas는 처음 사용해보았는데 방식이 svg와 거의 비슷하다. 다만 getContext 메서드를 '2d'로 사용을 했을 때 한정이고, 'webgl'이나 'webgl2' 같은 컨텍스트를 사용하게 되면 방식이 아예 달라지는 것 같다. 3d 모션 그래픽을 구현할 때 주로 사용하던데 나중에 꼭 구현해보고 싶다.

Github 보기

!codepen[mak-somniferum/embed/OJBmpzX?default-tab=js%2Cresult&theme-id=dark]

마치며

솔직히 한 달이면 업무도 하면서 충분히 할 줄 알았는데, 일정이 겹치고 겹쳐서 꽤 바빠지며 시간이 촉박하게 되었다. 시간이 좀 더 있었으면 분명 더 나았을 부분도 있기에 아쉽다. 그래도 어찌어찌 마무리는 되었고 뿌듯함도 느낀다. 아직 갈 길이 멀지만, 앞으로도 토이 프로젝트나 스터디를 하나씩 진행해 가면 분명 발전할 것이라 생각한다.

🐬 Nomad Coder의 'NextJS 시작하기' 메모입니다.

1. 시작

nxp create-next-app

Next는 Typescript로 많이 쓰는 것 같다. 니코도 그게 제일 좋다고 한다. 처음에 create-next-app을 실행하면 app이름부터 Typescript 사용할건지, eslint 사용할건지, 뭘 많이 물어본다. 기본으로 선택되어 있는게 있어서 엔터만 눌렀다. (변경을 어떻게 하는지 몰랐다.) 그럼 아래처럼 디렉토리가 생성된다. package.json은 간단하게 되어있다.

2. 실행

npm run dev

localhost로 들어가보면 인트로 화면이 예쁘게 나온다. (요새 블러 처리한 배경이 유행인듯)

3. 페이지 생성

/src 경로를 생성하였다면 /src/page 폴더 안의 파일을 전부 삭제 후 index 파일부터 만들어 준다. 컴포넌트 이름은 아무거나 써도 상관없다. /about 경로의 페이지를 만들고 싶다면 /page 폴더 안에 about 파일만 만들면 된다. 컴포넌트 이름은 아무거나 써도 상관없다. React에서는 Router 설치하고 render 하고 여러 과정이 있어 많이 헷갈렸는데 Next에서는 암무것도 필요가 없다.

🐬 pages 폴더 안에 파일명(페이지명)을 신경써서 만들고 🐬 함수를 default로 export하기

4. 페이지 렌더링

🐬 React: CSR(Client-Side Rendering) 🐬 Next: SSR(Server-Side Rendering)

• 리액트가 CSR만 되는건 아님.

Next가 React랑 또 다른 점은 페이지 렌더링에서 나타난다. React는 페이지를 렌더링 할 때 HTML은 id="root"인 div밖에 나타나 있지 않다. 그래서 Javascript를 렌더링 할 때까지 유저는 빈 화면을 보게 된다. 하지만 Next는 내가 작성한 HTML 요소들을 Javascript가 렌더링 되기 전에 미리 렌더링한다. 그래서 유저들은 Javascript가 렌더링 될 때까지 빈 화면을 보고 있지 않아도 된다.

✔ Link가 a 태그와 같이 클릭 시 특정 주소로 이동해주는 태그라면, useNavigate는 양식이 제출되거나 특정 행동을 하면 페이지 이동을 할 수 있는 "함수를 반환"하는 훅 ✔ 특정 조건을 충족할 경우에 페이지 이동이 가능하다. ✔ index를 사용하여 history 기능 사용 가능 -> navigate(-1), navigate(1), ...

사용방법

import { useNavigate } from "react-router-dom";

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

  return(
    <Wrapper>
      <Container>
        <Button title="글 작성하기" onClick={() => { navigate("/post-write"); }} />
        <PostList posts={data} onClickItem={(item) => { navigate(`/post/${item.id}`); }} />
      </Container>
    </Wrapper>
  );
}

useNavigate()의 인자

✔ navigate("/이동경로", { replace: true, state: { 키:값, 키:값 ... }}); ✔ 첫 번째 인자로는 주소, 두 번째 인자로 { replace, state } 인수를 사용

replace (true or false)

• true를 사용한다면, 이동경로로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않음. 이 때는 자신의 메인 페이지 ("/")로 돌아오게 됨.

• false는 뒤로가기가 가능하며 기본 값.

state 사용 예시

navigate("/이동경로", {
    state: {
        id: 1,
        job: "개발자"
    }
});

const navigateState = useNavigate().state;
const [userId, setUserId] = useState(navigateState && navigateState.id);

✔ 데이터를 넘길 때 props를 사용하지 않는 새로운 방식

아래는 기존에 데이터를 props로 전달하는 방식과 Context로 전달하는 방식을 표현한 예시이다.

기존 방식

Context 사용

언제 사용해야 할까

Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 그러한 데이터로는 현재 로그인한 유저, 테마, 언어 등이 있다.

props를 사용한 데이터 전달 예시

Context를 사용한 데이터 전달 예시

사용 방법

1. Context 생성 const ThemeContext = creatContext("light");

2. Context 저장 < ThemeContext.Provider value="dark" >

3. Context 접근하기 3-1. Context.Consumer < ThemeContext.Consumer > {value => < Button theme={value} />} 3-2. useContext(Context) 3-3. contextType - class 컴포넌트

사용 전 고려할 것

✔ 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것. ✔ context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰는 걸 추천. ✔ context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다. ✔ Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 생길 수도 있다. 이를 피하기 위해서는 값을 부모의 state로 끌어올린다.

<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

user와 avatarSize라는 props를 실제로 사용하는 곳은 Avatar 컴포넌트 뿐인데 props를 여러 단계에 걸쳐 보내줘야 한다는 게 번거로워 보일 수 있다. 게다가 위에서 Avatar 컴포넌트로 보내줘야하는 props가 추가된다면 그 또한 중간 레벨에 모두 추가해줘야 한다.

여기서 Avatar 컴포넌트 자체를 넘겨주면 context를 사용하지 않고 이를 해결할 수 있다. 그러면 중간에 있는 컴포넌트들이 user나 avatarSize 에 대해 전혀 알 필요가 없다.

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

// 이제 이렇게 쓸 수 있다.
<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout userLink={userLink} />
// ... 그 아래에 ...
<NavigationBar userLink={userLink} />
// ... 그 아래에 ...
{props.userLink}

이렇게 바꾸면 Link와 Avatar 컴포넌트가 user 와 avatarSize props를 쓴다는 걸 알아야 하는 건 가장 위에 있는 Page 뿐이다.

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

✔ 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것.

Containment

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.

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

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

여기서 children은 리액트에서 기본적으로 제공해주는 prop이다.

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

h1과 p는 FancyBorder의 props.children으로 전달되고, FancyBorder는 {props.children}을 div 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력된다.

여러 개의 children이 필요한 경우

여러 개의 children이 필요한 경우 고유한 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() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

Specialization(특수화)

때로는 어떤 컴포넌트의 “특수한 경우”인 컴포넌트를 고려해야 하는 경우가 있다. 예를 들어, WelcomeDialog는 Dialog의 특수한 경우라고 할 수 있다. 리액트에서는 합성을 사용하여 특수화를 구현한다.

아래 예시에서는 Dialog라는 범용적인 컴포넌트를 만들고, 거기에 props를 구분하여 WelcomeDialog라는 특수한 경우의 컴포넌트를 만들었다. props.title과 props.message에 어떤 내용을 넣느냐에 따라 경고 다이얼로그가 될 수도 있고, 웰컴 다이얼로그가 될 수도 있다.

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

function WelcomeDialog() {
  return (
    <Dialog
      title="어서 오세요!"
      message="우리 사이트에 방문하신 것을 환영합니다!" />
  );
}

Containment와 Specialization을 함께 사용

상속(Inheritance)

Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했다고 한다.

props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공한다. 컴포넌트가 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있다.

UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있다. 상속받을 필요 없이 말이다.

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

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이럴 때는 가장 가까운 공통 상위 컴포넌트로 state를 끌어올리는 것이 좋다.

React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 “진리의 원천(source of truth)“을 하나만 두어야 한다. 보통의 경우, 1) state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 2) 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다.

다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천한다.

다른 컴포넌트로 state 공유

✔ state 공유는 props로 이루어진다. ✔ 상위 > 하위 혹은 하위 > 상위 순서는 상관 없다. 무조건 상위부터 시작한다. (하향식 데이터 흐름)

Example

상위 컴포넌트

import { useState } from "react";
import ChildInput from "./ChildInput";

function ShareValue(){
  const [value, setValue] = useState("First Value");

  const handleChangeValue = (childStateValue) => {
    setValue(childStateValue);
  }

  return (
    <div>
      <ChildInput value={value} onChangeValue={handleChangeValue} />
      <p>ChildInput 의 value: {value}</p>
    </div>
  );
}

하위 컴포넌트

function ChildInput(props){
  const handleChange = (event) => {
    props.onChangeValue(event.target.value);
    // props.onChangeValue === 상위 컴포넌트의 handleChangeValue
  }
  return (
    <div>
      <input type="text" value={props.value} onChange={handleChange} />
    </div>
  );
}

결과

위 예제를 보면 input에 "First Value"를 표시하는 데에 아래의 순서를 따르고 있다.

1. 상위 컴포넌트에서 state 최초 선언. const [value, setValue] = useState("First Value");
   
   
2. 하위 컴포넌트에서 상위 컴포넌트의 state를 props로 받아와 _< ChildInput value={value} onChangeValue={handleChangeValue} />_
   
   
3. 하위 컴포넌트 내부에서 props로 받아온 state를 사용하여 _< input type="text" value={props.value} onChange={handleChange} />_
   
   
4. 하위 컴포넌트의 input에 "First Value"를 표시.

그리고 value의 state를 변경하는 데에는 아래의 순서를 따르고 있다.

1. 하위 컴포넌트에서 상위 컴포넌트의 함수를 props로 받아와 _< ChildInput value={value} onChangeValue={handleChangeValue} />_
   
   
2. 하위 컴포넌트 내부에서 props로 받아온 함수를 사용하여 input의 value를 넘기고 const handleChange = (event) => { props.onChangeValue(event.target.value); }
   
   
3. 상위 컴포넌트의 value에 대입 const handleChangeValue = (childStateValue) => { setValue(childStateValue); }

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

✔ React에 의해 값이 제어되는 입력 폼 엘리먼트. ✔ 제어 컴포넌트의 값은 state, setState, useState 로 관리된다. ✔ < input type="file" >은 값이 읽기 전용이므로 비제어 컴포넌트다.

function SignUp(props){
  const [name, setName] = useState("");
  const [gender, setGender] = useState("");
  const [intro, setIntro] = useState("");

  const handleChangeName = (event) => {
    setName(event.target.value);
  };

  const handleChangeGender = (event) => {
    setGender(event.target.value);
  };

  const handleChangeIntro = (event) => {
    setIntro(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(`이름: ${name}, 성별: ${gender}, 소개: ${intro}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름: <input type="text" value={name} onChange={handleChangeName} />
      </label>

      <label>
        성별: 
        <select value={gender} onChange={handleChangeGender}>
          <option value="남자">남자</option>
          <option value="여자">여자</option>
        </select>
      </label>

      <label>
        소개: <textarea value={intro} onChange={handleChangeIntro}></textarea>
      </label>

      <button type="submit">제출</button>
    </form>
  );
}

< input type="text" >, < textarea >, < select > 태그들을 제어 컴포넌트로 만드는 방식은 모두 비슷하다. 모두 value라는 attribute를 통해서 값을 전달하고 onChange에서 setValue() 함수를 사용하여 값을 업데이트 한다.

비제어 컴포넌트

대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋다. 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.

function Profile(props) {
  const nameInput = useRef();
  const fileInput = useRef();

  const handleSubmit = (event) => {
    alert(`이름: ${nameInput.current.value}, 프로필 사진: ${fileInput.current.files[0].name}`);
    event.preventDefault();
  }

  return(
    <form onSubmit={handleSubmit}>
      <label>
        이름: <input type="text" ref={nameInput} />
      </label>

      <label>
        프로필 사진: <input type="file" ref={fileInput} />
      </label>

      <button type="submit">제출</button>
    </form>
  );
}

유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 Formik이 대중적인 선택 중 하나.

참고 https://ko.reactjs.org/docs/forms.html

function NumberList(props) {
  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

Key

✔ 리스트에서 아이템을 구분하기 위한 고유한 문자열. ✔ 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. ✔ 배열 내부의 엘리먼트에 지정. ✔ 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다. ✔ 대부분 ID를 key로 사용한다. ✔ ID가 없다면 항목의 인덱스를 key로 사용할 수 있다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

const todoItems = todos.map((todo, index) =>
  // 고유한 ID가 없을 경우에만 사용
  <li key={index}>
    {todo.text}
  </li>
);

li 를 ListItem 이라는 컴포넌트로 추출한 경우 ListItem 안에 있는 li 가 아니라 ListItem 컴포넌트가 key를 가져야 한다.

function ListItem(props) {
  // 여기에는 key를 지정할 필요가 없다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 배열 안에 key를 지정해야 한다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달해야 한다. 아래 예시에서 Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽을 수 없다.

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

JSX를 사용하면 중괄호 안에 모든 표현식을 포함 시킬 수 있으므로 map() 함수의 결과를 인라인으로 처리할 수 있다.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않다. JavaScript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 한다. map() 함수가 너무 중첩된다면 컴포넌트로 추출 하는 것이 좋다.

참고 https://ko.reactjs.org/docs/lists-and-keys.html

✔ React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. ✔ if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

위에 나오는 Greeting 컴포넌트는 isLoggedIn이라는 변수의 값이 true에 해당되는 값(Truthy)이면 UserGreeting 컴포넌트를 리턴하고, 그렇지 않으면(Falsy) GuestGreeting 컴포넌트를 리턴한다. 이처럼 조건에 따라 렌더링의 결과가 달라지도록 하는 것을 조건부 렌더링이라고 한다.

엘리먼트 변수

✔ 컴포넌트를 변수처럼 다룬다.

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>Login</button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>Logout</button>
  );
}

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
      setIsLoggedIn(true);
  }

  const handleLogoutClick = () => {
      setIsLoggedIn(false);
  }

  let button;
  if (isLoggedIn) {
      button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
      <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

위 코드에선 isLoggedIn 값에 따라 button이라는 변수에 컴포넌트를 대입하는 것을 볼 수 있다. 그리고 이렇게 컴포넌트가 대입된 변수를 return에 넣어 실제로 컴포넌트가 렌더링이 되도록 만들고 있다. 이처럼 엘리먼트를 변수처럼 저장해서 사용하는 방법을 엘리먼트 변수라고 한다.

변수를 선언하고 if를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용할 수도 있다.

인라인 조건

AND 연산

true && expression -> expression false && expression -> false

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다.

falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해야 한다. 아래 코드의 결과는 화면에 아무것도 안 나오는 것이 아니라 count의 값인 0이 들어가서 "0" 이 출력된다.

function Counter(props) {
  const count = 0;
  return (
    <div>
      {count && <h1>카운트: {count}</h1>}
    </div>
  );
}

삼항 연산자

condition ? true : false

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
      setIsLoggedIn(true);
  }

  const handleLogoutClick = () => {
      setIsLoggedIn(false);
  }

  return (
      <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {isLoggedIn
          ? <LogoutButton onClick={handleLogoutClick} />
        : <LoginButton onClick={handleLoginClick} />
      }
    </div>
  );
}

null로 컴포넌트 렌더링 막기

컴포넌트 자체를 숨기고 싶을 때가 있다. 이때는 렌더링 결과를 출력하는 대신 null을 반환한다. 아래의 예시에서는 WarningBanner가 props.warn의 값에 의해서 렌더링된다. warn이 false라면 컴포넌트는 렌더링 되지 않는다.

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">경고!</div>
  );
}

function Page(props) {
  const [showWarning, setShowWarning] = useState(false);

  const handleToggleClick = () => {
      setShowWarning(pervShowWarning => !prevShowWarning);
  }

  return (
      <div>
      <WarningBanner warning={showWarning} />
      <button onClick={handleToggleClick}>
          {showWarning ? "감추기" : "보이기"}
      </button>
    </div>
  )
}

참고 https://ko.reactjs.org/docs/conditional-rendering.html

✔ 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 ✔ 이벤트 리스너라고 부르기도 함

함수 컴포넌트에서의 사용

import { useState } from "react";

function ConfirmButton(){
  const [isConfirmed, setIsConfirmed] = useState(false);

  // 방법 1. 함수 안의 함수로 작성
  function handleConfirm(){
    setIsConfirmed(!isConfirmed);
  } 

  // 방법 2. Arrow function으로 작성
  const handleConfirm = () => {
    setIsConfirmed(!isConfirmed);
  }

  return (
    <button onClick={handleConfirm} disabled={isConfirmed}>
      {isConfirmed ? "확인됨" : "확인하기"}
    </button>
  );
}

export default ConfirmButton;

클래스 컴포넌트에서의 사용(참고만 하자)

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };

    this.handleConfirm = this.handleConfirm.bind(this);
  }

  handleConfirm() {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

클래스 컴포넌트에서는 bind를 꼭 해주어야 한다. 기본적으로 Javascript에서 클래스 함수는 바운드가 되지 않기 때문이다. bind를 하지 않으면 this가 함수 바깥의 글로벌 스코프(전역 범위)에서 호출 되어 this.handleConfirm이 undefined가 된다.

만약 bind가 번거롭다면 아래처럼 클래스 필드 문법을 사용할 수 있다.

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };
  }

  handleConfirm = () => {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

혹은 이벤트 핸들러를 넣는 곳에 Arrow function을 사용할 수도 있다.

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };
  }

  handleConfirm() {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={() => this.handleConfirm()} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

Arguments(매개변수) 전달하기

✔ 함수에 전달할 데이터

함수 컴포넌트에서의 사용

function MyButton(props) {
    const handleDelete = (id, event) => { // id, event가 매개변수
        console.log(id, event.target);
    };

    return (
        <button conClick={(event) => handleDelete(1, event)}>삭제하기</button>
    );
}

클래스 컴포넌트에서의 사용

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>
<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

참고 https://ko.reactjs.org/docs/handling-events.html

✔ Memoized value를 리턴하는 훅. ✔ 연산량이 높은 작업이 매번 렌더링될 때마다 반복되는 것을 피하기 위해 사용. ✔ 렌더링이 일어나는 동안 실행. ✔ const memoizedValue = useMemo(값 생성 함수, 의존성 배열); ✔ 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 값 생성 함수를 호출하여 결괏값을 반환. ✔ 의존성 배열이 없을 경우 렌더링이 일어날 때마다 매번 값 생성 함수가 실행되므로 useMemo()를 사용하는 의미가 없음.

Example

import { useMemo, useState } from "react";

function ExUseMemo() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount(c => c + 1);
  };

  const addTodo = () => {
    setTodos(t => [...t, "New Todo"]);
  };

  const expensiveCalculation = (num) => {
    console.log("Calculating...");
    for (let i = 0; i < 1000000; i++) {
      num += 1;
    }
    return num;
  };

  const calculation = expensiveCalculation(count);

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
}

export default ExUseMemo;

출처 W3Schools

위 예제는 'Add Todo' 를 클릭할 때 마다 리렌더링 되면서 count 값이 변하지 않음에도 콘솔에 "Calculating..." 이 출력되고 계산량이 큰 for문도 매번 의미없는 작업을 하게 된다. 이를 방지하기 위해 useMemo()를 활용한다.

const calculation = expensiveCalculation(count);

해당 부분을 아래와 같이 변경한다.

const calculation = useMemo(() => expensiveCalculation(count), [count]);

calculation은 이제 렌더링이 될 때 마다 의존성 배열의 count를 이전 count 값과 비교한다. count가 변경되지 않았으면 계산을 거치지 않고 기억했던 이전 값을 그대로 반환하고, 변경이 되었을 땐 expensiveCalculation() 함수를 재계산하여 count의 값을 반환한다. 'Add Todo' 를 클릭해도 콘솔에는 "Calculating..." 이 출력되지 않으며, 의미없는 for문 작업도 하지 않는다.

어느 곳에 사용해야하나

✔ 위의 예제처럼 식의 부하가 크고, 자주 바뀌지 않는 값에 사용하는 것이 유용. ✔ Chrome에 React Developer Tools 프로파일러를 참고하여 시간이 오래 걸리는 코드를 찾고 필요한 경우 사용하는 것을 추천.

참고 https://beta.reactjs.org/apis/react/useMemo