🗂 SPA(Single Page Application)와 함께 알아두면 좋은 개념

✔️ CSR(Client Side Rendering) 이란?

처음 html 파일을 서버로부터 받아오고, 링크된 js를 서버에서 받아온 뒤 동적으로 랜더링하여 화면을 보여줌

👎 CSR 단점

1. 첫 화면을 랜더링하는 시간이 많이 소요됨
2. html 내 body가 비어져 있기 때문에 SEO에 불리함

✔️ 단점을 보강하기 위해 과거 static sites에서 영감을 받은 SSR(Server Side Rendering)

👍 SSR 장점

1. 첫 화면 랜더링 속도가 빨라짐
2. 모든 컨텐츠가 html에 담겨오기 때문에 보다 효율적인 SEO 가능

👎 SSR 단점

1. 사용자 인터렉션이 발생하면 전체 웹사이트를 서버에서 받아오기 때문에 user experience가 좋지 않을 수 있음(blinking issue!)
2. 사용자가 많을 경우 과부하 걸리기 쉬움
3. need to wait before interacting

📌 CSR - SSR

• ** CSR** : 웹 어플리케이션 로직이 담긴 html, css, js를 받아온 뒤 웹 사이트가 사용자에게 보여지기 때문에 TTV(Time to View), TTI(Time to Interact)가 동시에 이루어짐

• *SSR *: 서버에서 index 파일을 받아온 뒤 사용자에게 웹 사이트를 보여줌. 하지만 동적으로 제어할 수 있는 js 파일을 받아오기 전까지는 인터렉션이 불가. 즉, TTV 뒤에 TTI가 이루어짐.

💣 리랜더링을 막아라!

SPA(Single Page Application)에서 리액트는 컴포넌트를 분리하고 새로고침 없이 데이터를 동적으로 받을 수 있다는 점이 큰 장점이다. 따라서, 컴포넌트는 랜더링을 기준으로 분리하는 것이 중요하다.

그렇기 때문에 라우팅을 하는 경우에도, header와 footer와 같이 모든 페이지에 공통적으로 들어가는 부분이 계속해서 랜더링되지 않게 하는 것이 중요하다.

마켓홀리 프로젝트 내 라우터의 문제점은 다른 컴포넌트로 이동했을 때, 계속해서 <Nav />와 <Footer />가 리랜더링된다는 것이다. 동기적으로 진행되어 속도 또한 늦어지게 된다.

따라서, Switch 부분을 컴포넌트로 따로 분리하여 그 내부에서만 랜더링이 되도록 하는 것이 성능 측면에서 유리할 것이다.

트리 구조를 위 이미지와 같이 설계한다면, 헤더와 네브 바와 같은 공통적인 부분은 패널이 다른 컴포넌트로 바뀔 때 다시 랜더링이 되지 않는다.

만약 네비게이션 바를 nested list 형태(클릭하면 상세 리스트가 열리도록)로 구성하고 싶다면, 클릭된 폴더만 랜더링되도록 각 폴더 별로 컴포넌트를 분리하는 것이 좋다.

console.log(age);
age = 4;
console.log(age);
var age;

**`var`** 
: 선언하기 전에 값을 할당할 수 있고, 값을 할당하기 전에 출력도 가능함 
👉 ** var 호이스팅**

<br>

#### 💣 var를 쓰면 안되는 이유

**1. var hoisting **: 어디에서 선언했는지 상관없이 항상 선언을 제일 위로 끌어올려주는 것 

**2. has no block scope** : 블럭을 이용해 선언을 했더라도 어디에서나 보일 수 있음. 규모있는 프로젝트를 진행할 경우 문제가 될 수 있음.

<br>

#### 📌 let - const
`let` = mutable data type
`const` = immutable data type 

<br>

#### 📌 favor immutable data type always 
1. 보안상 이유
2. thread safety
3. 협업 시 실수를 방지해줄 수 있음

기존에 앱의 구조와 컴포넌트들을 어떤 방식으로 설계해야 좋을지 고민이 많았는데, 튜토리얼을 따라 진행하니 개념이 보다 명확해진 것 같았다.(물론 정답은 없지만)

기존 프로젝트와 달리 컴포넌트 성능 최적화도 고민해볼 수 있는 기회였다!🤓

⚙️ 컴포넌트 구조

📌 App.js / TodoTemplate.js

전체적으로 TodoTemplate컴포넌트가 input 창과 리스트를 감싸고 있는 구조이다. 그리고 TodoTemplate.js에서는 이를 {children}으로 받아오고 있다.

🔍 useRef 사용한 이유

id은 새로운 항목을 만들때 참조되는 값이기 때문에 id가 바뀐다고 해서 다시 랜더링될 필요가 없다. 따라서 useRef를 사용하여 관리한다.

🔍 useCallback 사용한 이유

👉 랜더링 성능 최적화를 위해! 컴포넌트가 다시 랜더링될 때마다 함수를 만드는 것이 아니라, 한번 함수를 만들고 다시 재사용하기 위해 사용한다.

🔍 useCallback 사용법

첫 번째 파라미터에는 생성하고 싶은 함수를, 두 번째 파리미터에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해준다(의존성 배열). onInsert 함수에서는 setTodos를 통해 todos 값이 변화하기 때문에 배열에 todos를 넣어주었다.

📌 TodoInsert.js

1. onInsert 함수

input 참에 입력된 텍스트를 받으면, 변수 todo에 nextId와 text, checked를 할당해준다. 그 후 concat 함수를 활용해 배열에 새로 입력된 항목을 추가해주고, nextId를 현재의 값에서 +1 해준다.

🔍 form 태그를 사용한 이유

input과 button 태그를 form 태그로 묶어주고, form 태그 내에서 onSubmit 이벤트를 준 이유는 버튼 클릭과 엔터 키로 입력할 수 있기 때문이다. ➕ 더불어, semantic value와 가독성 측면에서도 의미가 있다고 생각한다.

onChange 함수를 통해 input에 입력된 value 값을 업데이트 한다. 사용자가 추가 버튼을 클릭했을 때 onSubmit 함수가 실행되는데, 여기에서는 value를 onInsert의 파라미터로 넣어주고 setvalue('')를 통해 input 창을 초기화 시켜둔다.

e.preventDefault()는 onSubmit 이벤트가 브라우저를 새로고침 시키는 것을 방지해준다.

📌 TodoList.js

App.js에서 넘겨준 todos, onRemove, onToggle를 props로 받고, map 함수를 통해 TodoListItem 컴포넌트를 리스트로 만들어준다.

📌 TodoListItem.js

App.js에서 넘겨준 onRemove, onToggle 함수를 props로 받고 있다.

1. onRemove 함수

클릭된 항목의 id를 받아 다시 setTodos를 해준다. 여기서 기존 데이터를 변형하지 않는 filter 함수를 사용해 클릭된 항목 이외의 것만 남겨준다.

마지막으로 state todos가 변형되었을 때 해당 함수가 실행될 수 있도록 의존성 배열에 todos를 넣어주고, useCallback 함수로 감싸주어 랜더링 성능을 최적화 해준다.

2. onToggle 함수

체크하면 가운데 선이 생기고 다시 클릭하면 원래대로 돌아오는 토글 기능을 구현하기 위해 map 함수를 사용하여 기존 todos state에서 체크된 항목을 반영해 새로운 배열을 반환했다.

삼항연산자를 활용해 체크가 되었다면 스프레드 연산자로 나머지 항목은 유지하고 checked만 !todo.checked를 주었다.

🔍 className={cn('checkbox', {checked})}

• import cn from 'classnames';
• 조건부 스타일링을 주기 위해 classNames 라이브러리 사용
• {checked}가 true인 경우 className="checkbox checked"가 되는 것을 볼 수 있다.!

📌 CSS

• transition: 0.3s background ease-in; 버튼 호버 시, 보다 부드러운 효과를 주기 위해 사용

• &:nth-child(even) { background-color: rgb(240, 240, 240); } 짝수번째 리스트는 배경 색상을 회색으로 주기 위해 사용

• `svg {

  font-size: 20px;

  }` react icon을 사용할 경우 아이콘에 className을 주었는데 그럴 필요 없이 svg로 명시하면 된다!

• & + & { border-top: 1px solid lightgray; } = .todoListItem + .todoListItem { border-top: 1px solid lightgray; } 리스트 사이에 border를 줄 때 사용

📆 완성!

참고) 리액트를 다루는 기술

랜더링이 될 때마다 실행되는 함수. 처음 랜더링될 때 + setState를 통해 업데이트가 될 때마다 실행된다.

👉 처음 랜더링될 때만 실행하고 싶다면, useEffect 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다.

👉 의존성 배열 추가 특정 값이 업데이트될 때만 실행하고 싶다면 배열 내 검사하고 싶은 값을 넣어주면 된다.

useEffect(()=> {console.log({name})}, [name])
// 처음 랜더링될 때에도 useEffect가 실행되는 것을 알 수 있다. 
// 이는 state 초기값을 처음 세팅해주었기 때문! 

```

👉 clean up! 컴포넌트가 unmount 되기 전 + 업데이트되기 전 실행하고 싶다면 cleanup 함수를 반환해주어야 한다.

• 다음 번 랜더링보다 먼저 실행됨
• cleanup 함수는 클로저로서 이전 환경을 기억하고 있음
• unmount 되기 전에만 실행하고 싶다면 두번째 파라미터로 빈 배열을 넣어주면 됨

참고) https://simsimjae.tistory.com/400?category=384814

• 변수 : 변경 가능한 데이터가 담길 수 있는 공간
• 식별자 : 어떤 데이터를 식별하는 데 사용되는 이름, 변수명

🗂 데이터 할당 과정

• *기본형 데이터 * : 변수 선언 시, 메모리 빈 공간에 식별자 저장, 우선 그 공간의 값은 undefined로 할당. 데이터 할당 시, 별도의 공간에 데이터 저장, 그 공간의 주소를 변수의 값 영역에 할당.

• 참고형 데이터 : 참고형 데이터 내부 프로퍼티들을 위한 변수 영역 별도로 확보하고 확보된 주소를 변수에 연결.

🗂 불변값, 가변값

🔍 불변값의 성질

변수 a에 'abc'를 할당했다가 뒤에 'def'를 추가하면 기존의 값이 바뀌는 것이 아니라 새로운 문자열 'abcdef'를 만들어서 그 주소를 변수 a에 저장함. 이와 같이 변경은 새로 만드는 동작을 통해서만 이루어지며, 가비지 컬렉팅을 당하지 않는 한 한번 만들어진 값은 영원히 변하지 않음.

기본형 데이터_(number, string, boolean, null, undefined, symbol)_는 모두 불변값

🔍 참조형 데이터가 가변값인 경우

// 기본형 데이터
var a = 10;
var b = a;
b = 15;
// 참고형 데이터
var obj1 = {c: 10, d: 'ddd'};
var obj2 = obj1;
obj2.c = 20;

![](https://images.velog.io/images/yoojin-kwon/post/db0ef185-c33e-412a-a101-a91a055d9ce6/%E1%84%86%E1%85%AE%E1%84%8C%E1%85%A6.001.jpeg)

#### 🔍 참조형 데이터를 불변값으로 사용하는 경우
값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우
- 내부 프로퍼티들을 일일이 복사(깊은 복사)
- `immutable.js`, `ìmmer.js`와 같은 라이브러리 활용

1. state 설정

map 함수를 활용하여 리스트를 구현할 것이기 때문에 key 역할을 할 id도 객체에 담아준다.

  const [names, setNames] = useState([
    { id: 1, text: 'React' },
    { id: 2, text: 'JS' },
    { id: 3, text: 'SASS' },
    { id: 4, text: 'Styled Component' },
  ]);

미리 설정한 데이터 외 추가될 데이터가 있기 때문에 state 값을 업데이트 시켜줄 수 있어야 한다.

  const [nextId, setNextId] = useState(5);
  const [nextText, setNextText] = useState('');

2. map 함수 구현

기존 배열로 새로운 배열을 만드는 map 함수를 활용하여 list를 구현한다. 여기서 names는 처음에 설정한 state 값, name은 배열 내 각 요소를 의미한다.

      <ul>
        {names.map(name => (
          <li key={name.id}>
            {name.text}
          </li>
        ))}
      </ul>

3. 데이터 추가 기능 구현

데이터를 추가하기 위해 우선 input과 button을 만들어준다. 여기서 초기값인 value는 새롭게 입력될 nextText로 설정해준다. ❗️이 초기값이 없다면 나중에 button을 클릭한 후 입력된 값을 초기화하는 기능을 구현할 수 없다.

또한, 입력된 값으로 state 값을 업데이트 시켜주기 위해 onChange 이벤트도 추가해준다. 여기서 엔터를 쳤을 때도 list에 추가될 수 있게 구현하기 위해 onKeyPress 이벤트도 함께 넣어준다.

 <input
        type="text"
        name="newStack"
        value={nextText}
        onChange={onChangeInput}
        onKeyPress={onKeyPressInput}
      />

  const onChangeInput = e => {
    setNextText(e.target.value);
  };

  const onKeyPressInput = e => {
    if (e.key === 'Enter') {
      onClickInput();
    }
  };

🧐 e는 무엇일까? 콘솔 로그를 통해 SyntheticBaseEvent가 찍히는 것을 확인할 수 있다. 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받는다고 한다. 객체를 확인해보면 e.target.value는 input에 입력한 값이, e.key는 keyboard에서 누른 값이 찍히는 것을 알 수 있다.

사용자는 input에 추가하고 싶은 값을 입력하고, 엔터를 치거나 버튼을 클릭할 것이다. 그럼 onClick 이벤트를 통해 onClickInput 함수가 실행되도록 구현을 했다.

<button onClick={onClickInput}>레벨업</button>

  const onClickInput = () => {
    const nextNames = names.concat({
      id: nextId,
      text: nextText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setNextText('');
  };

concat 함수를 통해 names 배열에 새로운 id와 text를 추가해주고, setNextid를 통해 id를 업데이트 해준다. setNames를 통해 새로운 배열을 업데이트해주고, 마지막으로 input 창에 입력된 값을 초기화해주기 위해 setNextText('')를 사용해준다.

🧐 왜 concat 함수를 썼을까? 기존 배열에 새로운 요소를 추가하는 함수는 push와 concat이 있다. 둘의 차이는 push는 아예 기존 배열 자체를 변경해주고, concat은 기존 배열을 복사하여 새로운 배열에 요소를 추가한다. 리액트는 데이터를 변형시키지 않음으로써 성능 최적화라는 효과를 얻을 수 있다. 더 자세한 내용은 앞으로 차차 알아가기로 하고... 우선은 이러한 이유 때문에 concat 함수를 썼다는 사실만 기억하자!

4. 데이터 제거 기능 구현

더블 클릭한 리스트 요소를 사라지게 하고 싶기 때문에 이벤트의 위치는 list에 둔다.

      <ul>
        {names.map(name => (
          <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
            {name.text}
          </li>
        ))}
      </ul>

실행되는 onRemove 함수에서 어떤 값을 제거할지 알아야 하기 때문에 props로 더블 클릭한 요소의 id값을 넘겨준다.

  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  };

그럼 그 id 값을 받아 filter 함수로 제거해주는데, filter 함수를 쓰는 이유도 아까 concat 함수를 쓰는 이유와 동일하다. id 값이 더블 클릭된 요소의 id 값과 같지 않는 것만 남겨준다. 그리고 다시 setNames!

🧐 filter 함수

const numbers = [1,2,3,4,5,6];
const withoutThree - numbers.filter(number => number !== 3); 
// [1,2,4,5,6]

종합해보면,

function IterationSample() {
  const [names, setNames] = useState([
    { id: 1, text: 'React' },
    { id: 2, text: 'JS' },
    { id: 3, text: 'SASS' },
    { id: 4, text: 'Styled Component' },
  ]);

  const [nextText, setNextText] = useState('');
  const [nextId, setNextId] = useState(5);

  const onChangeInput = e => {
    setNextText(e.target.value);
  };

  const onKeyPressInput = e => {
    if (e.key === 'Enter') {
      onClickInput();
    }
  };

  const onClickInput = () => {
    const nextNames = names.concat({
      id: nextId,
      text: nextText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setNextText('');
  };

  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  };

  return (
    <div className="iterationSample">
      <h3>Skills</h3>
      <ul>
        {names.map(name => (
          <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
            {name.text}
          </li>
        ))}
      </ul>
      <input
        type="text"
        name="newStack"
        value={nextText}
        onChange={onChangeInput}
        onKeyPress={onKeyPressInput}
      />
      <button onClick={onClickInput}>레벨업</button>
    </div>
  );
}

참고) 리액트를 다루는 기술

모달 창은 사용자에게 특정 내용을 강조하여 전달하고자 할 때 사용한다. 모달 창에 대한 주목도를 높이기 위해 일반적으로 배경을 어두운 색상으로 두어 대비를 준다.

그런데 위 이미지와 같이 다른 컨텐츠들이 모달 창보다 높은 z-index를 가진다면? 좋은 모달 창이라고 할 수 없을 것이다.

해결 방법으로 React Portals를 알아보고자 한다!

📌 Portals 이란?

React portal is just a way to render components outside of the normal DOM hierarchy that is defined by the component tree.

부모 컴포넌트 밖에서 랜더링되기 때문에 부모의 스타일을 상속받지도 않고, 모달 창과 같이 가장 위에 있는 레이어에서 구현되어야 할 경우 z-index을 설정하기도 편리하다.

" portals의 일반적인 사용 사례는 부모 컴포넌트가 overflow: hidden 이나 z-index 스타일을 가지지만, 자식이 컨테이너에서 시각적으로 “이탈해야 하는” 경우입니다. "

➕ 부모 컴포넌트와 같은 DOM 트리에 있지 않기 때문에 불필요한 랜더링이 발생하지 않는다.

" React portal is an incredibly useful tool since it allows rendering of components outside the normal DOM hierarchy without breaking event propagation of the component hierarchy. This is incredibly useful when rendering components such as modals, tooltips, popup messages, and so much more. "

( 위 코드처럼 other content의 z-index가 2라면 Modal 컴포넌트의 z-index가 아무리 높아도 부모의 z-index가 1이기 때문에 처음 보았던 이미지처럼 모달 창이 열렸을 때도 other content가 진하게 보인다🥲 )

📌 그럼 어떻게 사용하면 될까?

React에서는 가상 DOM이 들어갈 껍데기의 역할을 하는 index.html이 있다. 거기에는 <div id="root"></div>가 있고, 그것이 index.js를 통해 App.js로 연결되어 있다.

id가 root라는 DOM 외부에서 랜더링을 하기 위해서는 ReactDOM.createPortal(child, container)을 사용하면 된다.

여기서 container는 UI를 랜더링 시키고자 하는 DOM을 의미한다.

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal"></div>
  </body>

그러면 개발자 도구에서 전체 화면과 모달 창 컴포넌트 위치가 분리된 것을 볼 수 있다.

📌 모달 창 구현 로직

부모 컴포넌트에서 모달 창을 열고 닫는 상태를 관리하는 isOpen state를 만들어주고, open props를 넘겨준다. onClick 이벤트가 실행될 경우, setInOpen 함수를 통해 state isOpen을 true 값으로 바꿔준다.

모달 창이 닫힐 때는 반대로 setInOpen 함수를 통해 state isOpen을 false로 바꿔주는데, 자식 컴포넌트인 Modal에 Close Modal 버튼이 있기 때문에 props로 넘겨주어야 한다.

따라서, state 값을 false로 변경해주는 함수를 onClose라는 props로 넘겨주고, onClick={onClose}를 통해 받아주면 된다!

참고) -Learn React Portal In 12 Minutes By Building A Modal -React Portals -Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

📌 Recoil?

"A state management library for React"

📌 RecoilRoot

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';
ㅤ
function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree.

📌 Atom - "데이터 조각"

Atom

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

Atoms are units of state. They're updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

📌 useRecoilState

useRecoilState

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  ㅤ
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

To read and write an atom from a component, we use a hook called useRecoilState. It's just like React's useState, but now the state can be shared between components.

📌 selector

1. Atom에서 파생된 데이터 조각 2. 데이터를 반환하는 순수함수

selector

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';
ㅤ
    return `${fontSize}${unit}`;
  },
});

selector는 atom의 상태에 의존하는 동적인 데이터를 생성합니다. selector에서는 get 함수(필수항목)를 통해 atom 정보들을 1개 이상 가져올 수 있습니다. 이를 통해 atom을 조합하여 간단히 새로운 데이터를 생성할 수 있습니다. 물론 atom의 정보가 바뀌면 해당 atom을 의존하는 selector도 자동으로 리랜더링이 됩니다. 또한 한개 이상의 atom 정보를 업데이트 하도록 set 함수(선택항목)를 받을 수 있습니다. [인용_https://blog.woolta.com/categories/1/posts/209]

📌 useRecoilValue

useRecoilValue

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);
ㅤ
  return (
    <>
      <div>Current font size: {fontSizeLabel}</div>
      <button onClick={() => setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

구독하는 값만 반환하는 함수입니다. 값의 update 함수가 필요없을 경우 사용합니다.

📌 Suspense

• 컴포넌트가 완전히 랜더링될 수 있을 때까지 랜더링을 하지 않고 기다리는 역할
• 간단하게 비동기 상태 처리 가능

📌 Concurrent Mode

• 어떤 컴포넌트를 언제 랜더링할지 리액트 framwork가 알아서 최적화를 해주는 개념
• 간단하게 접근할 수 있는 API가 바로 React Suspense
  

[참고]

• https://recoiljs.org/
• https://tv.naver.com/v/16970954#comment_focus
• https://blog.woolta.com/categories/1/posts/209

해결

const roman = {
  'I' : 1,
  'V' : 5,
  'X' : 10,
  'L' : 50,
  'C' : 100,
  'D' : 500,
  'M' : 1000,
}

const romanToNum = s => {
  let arr = s.split("");

  let result = arr.reduce((acc, val, idx) => {
    let curVal = roman[val];
    let nextVal = roman[arr[idx + 1]];

    if (curVal < nextVal) {
     acc -= curVal
    } else {
      acc += curVal
    }
    return acc;
  }, 0)

  return result;
}

해결

const getLengthOfStr = str => {
    let arr = [];
    let newStr = '';

    for (let i in str) {
        if (newStr.includes(str[i])) {
            newStr = newStr.slice(newStr.indexOf(str[i]) + 1);    
        }
        newStr += str[i];
        arr.push(newStr.length);
    }
    return Math.Max(...arr);
}

useState

const [state, setState ] = useState(initialState);

• setState : state를 업데이트할 때 사용하는 함수
• initialState : 최초 렌더링 시 반환되는 state 값과 같다.

Example

function Example() {
  const [count, setCount] = useState(0);
    const [isModalActive, setIsModalActive] = useState(false);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={() => setIsModalActive(!isModalActive)}>modal btn
      </button>
    </div>
  );
}

useEffect

useEffect(() => {}, [state]);

• useEffect : 첫 번째 랜더링, 그리고 그 후 state가 업데이트될 때마다 실행
• 의존성 배열 : state 값의 변화만을 감지, state가 바뀔 때만 effect를 재실행(조건부 effect 발생)

*cf. Lifecycle *

** effect에서 함수를 반환하는 이유_effect를 위한 추가적인 정리(clean-up) 메커니즘**
: 클린업 함수가 클로저로서 생성될 시점은 이전 렌더링이 되었을 때이기 때문에 이전 환경을 기억하고 있다.

• 클로저 : 자신이 생성될 시점의 환경을 기억하는 함수

  const Foo = () => {
  const [state, setState] = useState(0);
  console.log("render", state); // 버튼 클릭 후 render, 1
  useEffect(() => {
    console.log("useEffect Callback", state); // 버튼 클릭 후 callback, 1
    return () => console.log("cleanUp", state); // 버튼 클릭 후 cleanUp, 0
  }, [state]);
  return <div onClick={() => setState(state + 1)}>버튼</div>;
  };
  export default Foo;

❗️ useEffect(() => {});

useEffect(function, deps) 에서 deps를 제외하고 사용하면 렌더링이 될 때마다 실행된다. 노트북이 너무 뜨겁게 돌아가길래 뭐지...? 했더니 바로 계속해서 렌더링이 되었던 것😅 첫번째 렌더링이 될 때만 useEffect를 실행하고 싶다면 deps에 빈 배열을 추가하면 된다.

2주 동안 프로젝트를 진행해보니, 생각보다 많은 branch, PR, 그리고 commit message가 쌓인 것을 확인할 수 있었다.

그동안 우리 굉장히 열심히 했구나... 라고 느낄 수 있었지만, 한편으로는 과연 history를 제대로 파악할 수 있을까? 라는 의구심이 들기 시작했다.

이에 대한 해결책으로 git flow & rebase를 들수 있다.

📌 Git Flow

The Gitflow Workflow defines a strict branching model designed around the project release. This provides a robust framework for managing larger projects. [출처]

purposes of the branches

• master : used for production releases
• develop : contains stable features for the next release
• feature : used for developing certain functions
• release : used for isolating and stabilizing the release
• hotfix : severe bug fixed for production

📌 Rebase

협업하는 개발자가 프로젝트의 history를 원활하게 파악하기 위해서는 rebase 작업이 필요하다. 다양한 branch에서 작업들이 이루어진다면 불필요한 merge commit이 발생하고, 그렇다면 github의 효율성을 낮추기 때문이다.

Rebase는 내 commit의 base를 변경하여, commit history를 일렬로 잘 정리해줍니다.

• 해당 브랜치의 base commit을 확인하는 방법 : git merge-base main branchname

Rebase Process

1. 새로운 작업을 마친 후 push 하기 전, main(master) branch에서 pull 받는다. git checkout main git pull origin main

2. 작업한 branch로 이동하여 git rebase -i main

3. squash : use commit but meld into previous commit 가장 오래된 commit message를 pick하고 나머지는 squash. 그후 esc + :wq!

4. 최종적으로 rebase된 commit message를 수정하는 과정. 현재까지의 작업 내용을 정리하여 작성한다. 그후 esc + :wq!

   commit message 수정 : git commit --amend

5. git log로 확인 후 최종 push! git push origin branchname -f

// Answer

function divideArrayInHalf(array) {  
    let result = [];
    for(let i=4; i >= 0; i--){
      if(array[i]<=10){
        result.unshift(array[i]);
      }else{
        result.push(array[i]);
      }
    } return result; 
}

fail이였던 이유

• for 문의 syntax에 맞지 않아서

  ; 하나까지 놓치지 말고 코드 작성하자!

• return을 if 문 안에 주었기 때문에 함수 실행 중단

  • return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.

  • 함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단됩니다.

javascript repl.it 20 - 날짜와 시간

// Answer

function getWesternAge(birthday) {
  let rightNow = new Date();

  let birthYear = birthday.getFullYear();
  let thisYear = rightNow.getFullYear();
  let birthMonth = birthday.getMonth()+1;
  let thisMonth = rightNow.getMonth()+1;
  let birthDate = birthday.getDate();
  let thisDate = rightNow.getDate();

  if(birthMonth < thisMonth){
   return thisYear - birthYear;
  } else if((birthMonth === thisMonth) && (birthDate <= thisDate) ){
   return thisYear - birthYear;
  } else{
   return thisYear - birthYear - 1; 
  }

}

fail이였던 이유

• 일치 연산자(===) 대신 = 를 썼다.

  • a = b와 같이 등호가 하나일 때는 할당을 의미한다.

  • 일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있다.

• tip) 코드에 오류가 발생한다면 console.log를 통해 결과값 확인해보기

javascript repl.it 21 - Number

// Answer

function getRandomNumber (min, max) {

 return Math.random() * (max-min) + min;

}

풀이법

0 <= Math.random() < 1 0 < Math.random() * (max-min) < (max-min) // 양변에 (max-min) 곱하기 min < Math.random() * (max-min) +min < max // 양변에 min 더하기

javascript repl.it 22 - Object

// Answer

function getData(salesArr,reviewArr,likeArr){

  let amount = 0;
  for(let i = 0; i < salesArr.length; i++){
    amount += salesArr[i][1];
    }

  let review = 0;
  for(var i = 0; i < reviewArr.length; i++){
    review += reviewArr[i][1];
    }

  let like = 0;
  for(var i = 0; i < likeArr.length; i++){
    like += likeArr[i][1];
    }

  let objData = {
    sumAmount : amount,
    sumReview : review,
    sumLike : like,
  };

  return objData;
}

풀이법

• let amount = 0; 으로 설정

  변수 선언과 초기화를 동시에 할 수 있다.

• 할당 연산자 활용

  amount += salesArr[i][1]; // amount = amount + salesArr[i][1]

javascript repl.it 24 - Class

// Answer

class MyMath {
 constructor(a, b){ 
   this.number1 = a;
   this.number2 = b;
   }

   getNumber(){
     return [this.number1, this.number2];
   }

   add(){
     return this.number1 + this.number2;
   }

   substract(){ 
     return this.number1 - this.number2;
   }

   multiply(){
     return this.number1 * this.number2;
   }
 }

fail이였던 이유

• class syntax에 익숙해지자! constructor도 또 하나의 함수일 뿐이다.

javascript repl.it 27 - Template literals, string method

// Answer

const handleEdit = (nickname, interests) => {

 return {
   nickname : nickname,
   interests : interests.split(','),
   bio : `제 닉네임은 ${nickname}입니다. 취미는 ${interests.split(',')}입니다.`

 };
}

fail이였던 이유

• split

  split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다. split syntax >> string.split( 'separator', limit )

  • separator에는 분할의 기준을, limit로 최대 분할 개수를 정한다.(선택 사항으로, 값을 정하지 않으면 전체를 다 분할한다.)
  • interests.split(', ')은 ,(쉼표)를 기준으로 분할한다.

javascript repl.it 28 - Array methods

// Answer

const moreThan100 = nums => {
  return nums.map(el => {
    if (el >= 100) return true;
    if (el < 100) return false;
    })
}


const formatDate = dates => {
  return dates.map(dates => {
    let dateArr = dates.split('-');

    return `${dateArr[0]}년 ${dateArr[1]}월 ${dateArr[2]}일`;
  });
}

fail이였던 이유

• Array.map()

  map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

  const array1 = [1, 4, 9, 16];
      // pass a function to map
  const map1 = array1.map(x => x * 2); 
  console.log(map1);
     // expected output: Array [2, 8, 18, 32]

• Array.forEach()

  forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

    const array1 = ['a', 'b', 'c'];
     array1.forEach(element => console.log(element));
        // expected output: "a" 
        // expected output: "b"
        // expected output: "c"

2주동안 하루하루 빠짐없이 쌓아왔던 우리 팀만의 코드들과 협업이 빛을 발하는 순간이라 두근거리기도, 한편으로는 아쉽기도 한 그런 날이였던 것 같아 잊기 전에 기록해보고자 한다.

📌 Overall

오랜만에 다시 해보는 팀 프로젝트라 처음에는 마냥 설렜던 것 같다.

광고홍보학을 전공한 나는 대다수의 수업이 제안서 기획으로 이루어졌고, 그래서 팀 프로젝트는 나의 대학 생활의 대부분을 차지했었다. 졸업 후 홍보대행사의 AE로서 업무를 진행했을 때도 광고주 뿐만 아니라 미디어랩사, 디자이너 등 다양한 파트너와 협업을 이어나갔다.

그런 나에게 '팀 프로젝트'라는 자체는 익숙했지만 '개발자'라는 역할로 참여한 팀 프로젝트는 처음이라 이전과는 다른 결의 협업을 상상(?)했던 것 같다.

하지만, 2주 후 나름대로 내린 결론은 '협업의 본질은 같다'이다. 효율적이면서도 전달력있는 커뮤니케이션을 위해 여전히 끊임없는 고민이 필요하다. 앞으로 현업에서는 기획자와 디자이너, 그리고 대내외적인 다양한 분야의 사람들과 이야기를 나누어야 할 것이다.

그런 점에서 앞으로 나아갈 개발자라는 길은 대학 때부터 걸어왔던 나의 길과 어느정도 일맥상통 한 것 같다.

📌 Project Process : Scrum

각 기능별로 역할을 분배했지만, 우리 팀원들은 서로의 문제를 함께 적극적으로 해결해나갔다. 다만 팀원 모두 공통적으로 아쉬움을 남겼던 부분이 있었다. 바로 Scrum.

프로젝트 전체를 놓고 보았을 때, 1주일이라는 Sprint Routine이 있었는데 아무래도 첫 프로젝트이고 전체적인 흐름에 대한 이해가 부족했기 때문에 하나의 Sprint가 너무 길어져 회고할 시간이 절대적으로 부족했다.

2차 프로젝트에서는 daily standup 미팅에서 부족함을 느꼈던 부분에 대한 논의가 보다 활발하게 이루어질 수 있도록 하자.

📌 기억하고 싶은 코드

1) 쿼리스트링을 활용한 페이지네이션 로직 구현

자세한 내용은 여기에서! 👉 MD 추천 - 페이지네이션 기능 구현

2) 컴포넌트 재활용

이번 프로젝트에서 컴포넌트 재활용을 위해 많은 고민을 했던 것 같다. 비슷한 구성 요소로 이루어져 있기는 하지만, 이미지 및 텍스트 사이즈부터 일일특가 및 countdown 마크까지 다르게 적용해주기 위해 일일특가에 사용될 컴포넌트에는 modifier를 주어 구분했다.

백엔드에서 '이 상품 어때요?' 와 '일일특가'의 할인율이 discount_rate와 daily_discount_rate로 다르게 들어올 수 밖에 없는 상황이였기 때문에 삼항연산자를 활용하여 분리해주었다.

다음 번 프로젝트에서는 보다 더 효율적인 방법으로 컴포넌트를 구조화하고 재활용하고 싶은 마음이 더 커졌달까...🤓

📌 기억하고 싶은 코드리뷰

1) Spread Syntax(스프레드 연산자)를 활용하여 중복 제거

2) 페이지 간 props 전달

장바구니 기능 구현 중, 다음 주소 api를 통해 사용자가 선택한 주소가 화면에 업데이트되도록 구현하고 싶었다. 부모-자식 관계의 컴포넌트가 아니였기 때문에 단순히 state 값을 props로 넘겨줄 수는 없어 localStorage에 저장하는 방법을 생각했다.

하지만...

리뷰와 같이 로컬 스토리지는 개발자 도구에서도 계속 확인할 수 있는 보안에 굉장히 취약한 부분이였던 것이다. 그래서 알아낸 다른 방법은 바로 history.push() 시간 관계 상 장바구니 기능을 계속해서 맡을 수 없었는데, 다음 프로젝트에서 동일한 문제를 만나면 꼭 사용해보고싶다!

• history.push()로 props를 넘겨주는 경우
• history.location()으로 props를 받아오는 경우

[참고_pdl39님 velog]

📌 마무리

나만의 보폭으로 이뤄낸 1차 프로젝트🏃‍♀️

팀 내에서 나의 역할은 Main Page 기능 구현이였다. 한 페이지였지만 4가지 기능 구현을 해야 하는 상황이였고, 그래서 결국 맡았던 장바구니 기능 구현을 끝까지 다 해내지 못했다.

그 시점 나의 성장 속도가 못마땅했던 것 같다. 하지만 하나의 코드를 작성하더라고 내 것으로 소화하기 위해 노력했고, 이렇게 회고의 리뷰를 작성하면서 그 동안의 성장이 '겨우'가 아닌 '이 만큼이나'라고 새삼 느껴졌다.

성장하기 위한 과정을 함께 한 팀원들에게도 감사 인사를 전하며, 2주 동안 나 자신 수고했다!👍

우선 동일한 페이지에서 구현되어 URL 변화는 없고, 그렇기 때문에 동적 라우팅을 적용하는 것은 아니라고 판단했다.

여기서 두 가지 가설을 세웠는데, 1) 카테고리 버튼을 클릭할 때마다 해당 카테고리의 index를 post하고 그에 맞는 데이터(추천 제품)을 받아와 컴포넌트에 담아준다. 2) 모든 버튼에 해당하는 데이터를 받아오고 클릭된 버튼에 맞는 데이터만 필터링한다.

하지만 아무리 생각해도 2번 가설은 너무 많은 데이터를 받아오기 때문에 적합하지 않을 것 같고, 개발자 도구 network에서 버튼을 클릭할 때마다 통신이 일어난다는 것을 확인할 수 있었다.

결국 1번 가설이 맞다는 판단이 들었다.

📌 Pagination

해결책을 찾는 중... 아주 딱 맞는 타이밍에 Pagination 세션을 듣게 되었다 야호!🙌 서버에서 오는 데이터를 원하는 길이로 끊어서 전달 받을 수 있는 기능이 바로 페이지네이션이다. 웹에서 흔하게 볼 수 있는 page 1,2,3,4,,,를 구현하기 위한 기능이다.

그렇다면 처음 세웠던 가설과 같이 클릭한 카테고리에 대한 정보를 백엔드에 전달해야하는데 이는 쿼리 스트링(Query String)을 사용하면 된다.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML form [출처_wikipedia]

페이지네이션을 위해서는 쿼리 스트링에 limit와 offset을 포함시켜주어야 한다.

• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)

우리 팀의 경우 하나의 카테고리 당 6개의 추천제품을 보여주기로 했기 때문에 limit=6이고 각 카테고리마다 동일한 값이기 때문에 변수로 지정해주었다. const LIMIT = 6;

📌 나의 코드

사용자가 원하는 카테고리 버튼을 클릭하면 카테고리에 해당하는 ListCategory 컴포넌트에서 onClick 이벤트를 통해 handleColor 함수가 실행된다. (함수명을 handleColor로 설정한 이유는 클릭될 때마다 회색에서 보라색으로 백그라운드 컬러가 변경되어야 하기 때문!)

클릭을 했을 때 1) 버튼 색상 변경, 2)해당되는 카테고리 추천 제품 데이터 불러오기, 두 가지 이벤트를 실행하고 싶기 때문에 handleColor 함수 안에 handleCategory 함수(2번에 해당)를 넣어주었다.

먼저 1번부터 살펴보자면, 처음 웹이 로딩되었을 때 디폴트로 채소가 클릭되었으면 해서 state 값으로 clickIndex='1'을 설정해주었다. 버튼을 클릭하면 함수가 실행되고, 클릭된 data-idx로 clickIndex가 재 설정된다.

그렇게 된다면 삼항연산자에서 clickIndex가 index+1 값과 동일해져 true가 되고 className이 clicked로 변경된다. scss에서 클래스 별로 다른 배경 색을 적용했기 때문에 클릭된 버튼의 색상이 바뀌게 된다.

비표준 속성, dataset [출처_javascript.info]
비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나 자바스크립트를 사용해 조작할 HTML 요소를 표시하기 위해 사용할 수 있다. data- 로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약된다. dataset 프로퍼티를 사용하면 이 속성에 접근할 수 있다.

id가 3인 카테고리를 클릭한 경우, /product/mdrecommendation?limit=6&offset=18

📌 구현 웹

페이지네이션이라는 개념을 접하기 전, 어떤 방식으로 데이터가 들어오고 출력될지 고민하고 그에 대한 해결책을 찾아 나갔다는 점에서 개인적으로 기억에 가장 남는 기능 구현이였다. 카테고리 별 정보 전달이라는 웹의 가장 기본적인 기능인 만큼 앞으로도 유용하게 활용할 것 같다!🤓

해결

const factorial = n => {
  if(n<=1){
    return 1;
  }else{
    return n * factorial(n-1);
  }
}

TIL

재귀(Recursion) = Recursion is simply when a function calls itself.

the three key features of recursion

1) 종료 조건(Termination Condition)

• if(something bad happened){ STOP };
• 재귀의 안전장치로서 원하지 않는 값이 들어왔을 때 재귀가 계속해서 동작하는 것을 방지(긴급 브레이크라고 생각하자!)
• // if(n<0) return;

  2) 기반 조건(Base Case)

• if(this happens) { Yay! We're done };
• 재귀를 종료한다는 점에서는 종료 조건과 유사하지만, 기반 조건은 재귀 함수의 목적지다.
• 만약 기반 조건이 없다면 재귀는 무한 로딩의 굴레로...😫
• // if(n<=1) return 1;

  3) 재귀(Recursion)

• 재귀가 실질적으로 일어나는 부분. Our function calling itself.
• // else{return n * factorial(n-1);}

삼항 연산자를 사용해 보다 간단하게 로직을 구현할 수도 있다.

const factorial = (n) => {
 return (n != 1) ? n * factorial(n - 1) : 1;
}

-------

[[참고_jakeseo-javascript.js님 velog]](https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-23-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%AC%EA%B7%80Recursion-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0)
[[참고_codeburst]](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea)

CSS property 순서

1. React

2. Library(Package)

3. Component

4. 변수 / 이미지

5. css 파일(scss 파일)

해결

const moveZeroes = nums => {

  let countzero = 0;

  for(let i of nums){
   if(i===0){
    countzero++
   }
  }

  const filterzero = nums.filter((el) => (el !== 0));

  for(i=0; i<countzero; i++){
    filterzero.push(0)
  }

  return filterzero;
}

TIL

*for..of vs. for..in *

• 현재 요소의 "값"을 얻고 싶다면 for..of 현재 요소의 "인덱스"를 얻고 싶다면 for..in

let fruits = ["사과", "오렌지", "자두"];
for (let value of fruits) {
  alert( value ); // 사과, 오렌지, 자두
}

```javascript
let arr = ["사과", "오렌지", "배"];
for (let key in arr) {
  alert( arr[key] ); // 사과, 오렌지, 배
}

filter 메소드

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length); // 2

***`let` vs. `const`***
```javascript
let countzero = 0;

  for(let i of nums){
   if(i===0){
    countzero++
   }
  }
```
처음에는 countzero를 `const`로 선언해주었다. 근데 for 문 안에서 countzero는 변화하는 숫자이기 때문에 `let`으로 바꿔야 맞다.

-------

[[참고_모던 자바스크립트 튜토리얼]](https://ko.javascript.info/array-methods)