
클라이언트 개발을 하다보면 아래와같은 상황을 구현해야 하는 경우가 많이 생긴다.

- Array안에서 한가지 아이템을 선택하면, 해당 아이템의 정보를 보여줘야 하는 상황

이러한 상황에서 state 중복과 오류를 피할 수 있는 방법을 알아보자.

### 코드 예시

```jsx
const initialPeoples = [
  { name: "John", age: 20 },
  { name: "Jenny", age: 26 },
  { name: "Peter", age: 30 },
];

function AgeCounter() {
  const [peoples, setPeoples] = useState(initialPeoples);
  const [selectedPeople, setSelectedPeople] = useState(null);

  return (
    <>
      <ul>
        {peoples.map((people) => (
          <li
            key={people.name}
            onClick={() => {
              setSelectedPeople(people);
            }}
          >
            {people.name}, age {people.age}
          </li>
        ))}
      </ul>
      <button
        onClick={() => {
          setPeoples(
            peoples.map((people) => ({ ...people, age: people.age + 1 }))
          );
        }}
      >
        Happy New Year!
      </button>
      <div>
        selected people is: {selectedPeople?.name}, age {selectedPeople?.age}
      </div>
    </>
  );
}
```

![image-20221207232649780](/images/posts/react-object-duplication/image-20221207232649780.png)

위 코드는 아래처럼 동작할 것이다.

- `initialPeoples` 에 인물의 정보를 포함한 객체 3개가 존재한다.
- `<ul>`태그 아래에서 해당 인물들의 정보를 모두 표시 한다.
- 특정 인물을 클릭하면, `selectedPeople`에 해당 객체를 저장한다.
  - 화면 최하단에 선택된 `selectedPeople` 정보를 표시한다.
- `Happy New Year!` 버튼을 누르게 되면, 인물들의 나이가 한살 씩 증가한다.
  - `selectedPeople`에 표시되는 나이도 +1이 된다.

얼핏보면 문제가 없는 코드라고 생각하기 쉽다! 그러나..

John을 선택한 후, `Happy New Year!` 버튼을 눌러도, `selectedPeople` 에 표시되는 나이는 올라가지 않는다!

![image-20221207232623367](/images/posts/react-object-duplication/image-20221207232623367.png)

그 이유는 `selectedPeople` 에 저장된 객체와, 내가 `Happy New Year!` 버튼을 눌러 나이를 올린 객체는 다른 객체이기 때문이다.

```jsx
<button
  onClick={() => {
    setPeoples(peoples.map((people) => ({ ...people, age: people.age + 1 })));
  }}
>
  Happy New Year!
</button>
```

setState(setPeoples)는 렌더링 라이플사이클 안에서, 이전 객체에 대한 포인터를 지닌채로 객체안의 프로퍼티 일부를 수정하는 형태로 동작하지 않고, 항상 새로운 객체를 생성하도록 강요된다.

`     peoples.map((people) => ({ ...people, age: people.age + 1 }))` 이 구문에서 이미 객체 생성 예약어`{}`를 사용하면서, `map`을 통해 만들어진 새로운 배열에 새로운 객체를 저장하였다. 따라서 새로운 배열의 새로운 객체 age가 올라간것과 `selectedPeople` 안에 있는 객체는 전혀 연관이 없기때문에, Happy New Year! 버튼을 눌러도 나이가 올라가지 않는다.

또한 이는 필요없는 객체를 중복으로 저장하고 있는 안티패턴이다.

### 어떻게 수정하면 될까?

`selectedPeople`이라는 state를 제거하고 `selectedPeopleName` 이라는 인물의 고유한 name을 값으로 가지는 state로 대체한다.

그리고 아래처럼 `selectedPeople`를 state가 아닌 일반변수로 새로 선언하여 사용한다!

```jsx
const initialPeoples = [
  { name: "John", age: 20 },
  { name: "Jenny", age: 26 },
  { name: "Peter", age: 30 },
];

function AgeCounter() {
  const [peoples, setPeoples] = useState(initialPeoples);
  const [selectedPeopleName, setSelectedPeopleName] = useState(null);
  const selectedPeople = peoples.find(
    (people) => people.name === selectedPeopleName
  );

  return (
    <>
      <ul>
        {peoples.map((people) => (
          <li
            key={people.name}
            onClick={() => {
              setSelectedPeopleName(people.name);
            }}
          >
            {people.name}, age {people.age}
          </li>
        ))}
      </ul>
      <button
        onClick={() => {
          setPeoples(
            peoples.map((people) => ({ ...people, age: people.age + 1 }))
          );
        }}
      >
        Happy New Year!
      </button>
      <div>
        selected people is: {selectedPeople?.name}, age {selectedPeople?.age}
      </div>
    </>
  );
}
```

![image-20221207233846531](/images/posts/react-object-duplication/image-20221207233846531.png)

#### 이제 John을 선택한 후 `Happy New Year!`버튼을 눌러도, 나이가 정상적으로 올라간다.


React State - 객체 중복 피하기


요 주제는 사실 `React`와는 관련이 없는 `HTML` 및 `JS` 내용이다. `Event Bubbling and Capturing` 에 대한 이해를 갖춘다면 `React` 에서 동일하게 사용할 수 있다.

아래처럼 `div` 태그를 부모로 갖고, `button` 태그를 자식으로 갖는 컴포넌트가 `DOM`에 렌더링 되어있다고 하자.

```jsx
const Example = () => (
  <div
    onClick={(event) => {
      console.log("div clicked");
    }}
  >
    <button
      onClick={(event) => {
        console.log("button clicked");
      }}
    ></button>
  </div>
);
```

## Event Capturing과 Bubbling

button을 눌렀을때, JS는 이벤트 전파를 위해 아래와 같은 처리를 한다.

![relation](/images/posts/react-event/1.png)

#### 1 최상위 `Document`에서부터, `onClick` 이벤트를 발생시킨 `target`을 한단계씩 찾아간다.

- `target`을 찾아가는 이 동작을 `Event Capturing` 이라 한다.

#### 2 `target` 을 찾았다면 다시 최상위 `Document` 까지 지나온 길을 거슬러 올라간다

- 위로 거슬러 올라가는 이 동작을 `Event Bubbling` 이라 한다.
- 거슬러 올라가는 동안 Event Capturing을 발생시킨 해당 event(예제 기준으로는, onClick)가 element(target 자기자신인 `button`, `div`, `body`, `html`)에 등록되어 있다면 해당하는 모든 이벤트를 차례로 발생시킨다
- `target`인 `button`에 해당 이벤트가 있으니 콘솔에 `button clicked`가 출력된다
- 거슬러 올라가면서`button`의 부모인 `div`에 해당 이벤트가 있으니 콘솔에 `div clicked`가 출력된다
- body, html에는 해당 이벤트(onClick)이 등록된것이 없으니 더이상의 출력은 없다

## Div가 발생시키는 콘솔 출력을 막으려면? - Event Propagation

이벤트는 `Event Bubbling Phase` 에서 발생한다. 이 버블링을 막으면 이벤트가 실행되는것을 막을 수 있다. 이를 `Event Propagation` 이라 한다.

`event.stopPropagation()` 호출을 통해 propagation을 실행 시킬 수 있다.

```jsx
const Example = () => (
  <div
    onClick={(event) => {
      console.log("div clicked");
    }}
  >
    <button
      onClick={(event) => {
        event.stopPropagation();
        console.log("button clicked");
      }}
    ></button>
  </div>
);
```

위 예제처럼 `button`의 이벤트를 propagate한다면 이벤트는 더이상 위로 버블링되지 않는다. 따라서 `div`의 onClick이벤트를 실행시키지 않는다.


React - 부모 요소 이벤트 방지하기, Event Bubbling, Capturing, and Propagation


(React Docs Beta > Quickstart > Thinking in React 를 읽고 재구성한 글 입니다.)

## `state`를 사용하지 말아야 하는 경우

(1) 렌더링 사이클 내에서 단 한번도 그 값이 바뀐적이 없다면? `state`가 아니다.

(2) `Parent Component`로부터 `props`를 통해 내려받았다면? `state`가 아니다.

(3) 당신이 만든 `state`가 이미 있는 `state`혹은 `props`로 전달받은 값으로부터 계산`compute`되어질 수 있다면? 그건 확실히 `state`가 아니다.

---

**(3) 은 특히 나도 잘 못 사용한 경우가 많은것 같다(...)**

예컨대 이런식으로는 하지 말라는 것!

```jsx
// 원래 가격이 price인 상품의 50% 할인된 가격도 같이 표시하려 할때
const Product = ({ price }) => {
  const [discountedPrice, setDiscountedPrice] = useState(price / 2);
  useEffect(() => {
    setDiuscountedPrice(price / 2);
  }, [price]);
  return (
    <div>
      원래 가격: {price}
      할인된 가격: {discountedPrice}
    </div>
  );
};
```

이런식으로 하자! (`compute`할 수 있는 값이라면, `state`로 선언하지 말 것)

```jsx
const Product = ({ price }) => {
  return (
    <div>
      원래 가격: {price}
      할인된 가격: {price / 2}
    </div>
  );
};
```

해당 계산된 값을 변수에 저장해서 쓰고싶다면,

```jsx
const Product = ({ price }) => {
  const discountedPrice = price / 2;
  return (
    <div>
      원래 가격: {price}
      할인된 가격: {discountedPrice}
    </div>
  );
};
```

혹 해당 값을 구하는 로직이 예시처럼 간단한 것이 아니고 복잡하다면, 렌더링을 최소화 하기 위해서 `useCallback`을 사용할 수도 있다. (tradeoff가 있으니 잘 판단해서 선택이 필요하다)

```jsx
const Product = ({ price }) => {
  const getDiscountedPrice = useCallback(() => price / 2, [price]);
  return (
    <div>
      원래 가격: {price}
      할인된 가격: {getDiscountedPrice()}
    </div>
  );
};
```

예제가 간단해서 "뭐야 저게? 당연한거 아니야?" 할 수도 있지만

시스템이 조금만 복잡해져도 위와같이 `compute`할 수 있는 값을 `state`로 쓰고 있는 경우가 꽤 있을것이다. (당장 내가 쓴 코드만 찾아봐도 한트럭.. 🥹)

---

`state`를 사용하지 말아야 하는 경우를 확실히 숙지하고 나면, 자신의 코드를 개선하는 것 뿐 아니라 타인의 코드를 리뷰할때도 큰 도움이 될 것이라고 생각한다.


React State - 사용하지 말아야 하는 경우


리액트에 입문하는 99%의 사람들은, 장담컨대 아래와 같은 현상에 당혹스러움을 느꼈을 것 이다.

```js
const Counter = () => {
  let counter = 0;
  return <button onClick={() => counter++}>{counter}</button>;
};
```

버튼을 눌렀는데 왜 화면에 카운터가 안올라가지..?

위 상황에서 버튼을 눌렀을 때 왜 counter가 올라가지 않는지 지금은 알고있는가?

useState를 쓰면 된다는 건 알아도 useState를 쓰면 왜 카운터가 올라가는지에 대해서 알고있는 사람은 많지 않을 것이다.

## 그럼, 본질적으로 리액트는 어떻게 동작할까?

```js
/* html */
<body>
  <div id="app"></div>
</body>;

/* js */
const $app = document.getElementById("app");
const jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
```

JSX.Element를 넘겨받은 후 그것을 순수한 HtmlElement로 파싱한 후, 특정 HtmlElement를 지정하고,

해당 HtmlElement아래에 파싱된 값`<div>안녕하세요</div>`을 렌더링 하는것이다.

이해를 돕기 위해 그것을 바닐라 JS로 표현하면 아래와 같다.

```js
const $app = document.getElementById("app");
const $divElement = doucment.createElement("div");
$divElement.innerText = "안녕하세요";
$app.appendChild($divElement);
```

다시 본론으로 넘어와서, 아래와 같은 코드를 동작시키면 어떤 일이 일어날까?

```js
const $app = document.getElementById("app");
let jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>반갑습니다</div>;
}, 3000); // 3초후에 jsx의 값을 <div>반갑습니다</div>로 바꾼다
```

정답은 화면에 보여지는 텍스트는 "안녕하세요"는 "반갑습니다"로 바뀌지 않는다. 이유는 글을 시작하면서 들었던 카운터 예제와 같다.

## 왜냐하면...

ReactDom.render()를 새로 호출하지 않았기 때문이다!

```js
const $app = document.getElementById("app");
let jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>반갑습니다</div>; // jsx의 값을 <div>반갑습니다</div>로 바꾼다
  ReactDom.render(jsx, $app); // 바꾼 값을 $app 아래에 다시 적용시킨다.
}, 3000);
```

타임아웃 콜백 안에서 ReactDom.render()를 다시 호출 해주면 화면에 텍스트는 그제서야 "반갑습니다" 로 바뀐다.

그럼 처음 카운터 예제에 적용 시켜 보자면...

```js
const Counter = () => {
  let counter = 0;
  return <button onClick={() => counter++}>{counter}</button>;
};
```

아니, 여기다가 어떻게 적용을 시켜야 하지?

ReactDom.Render를 어떻게 적용시켜야 할지 막막한가?

우리는 여기서 ReactDom.Render 함수를 실제로 임포트 해야할 필요가 없다.

```js
const Counter = () => {
  const [counter, setCounter] = useState(0);
  return (
    <button onClick={() => setCounter((prev) => prev + 1)}>{counter}</button>
  );
};
const $app = document.getElementById("app");
ReactDom.render(<Clicker />, $app);
```

useState의 반환값 배열의 setState(여기서는 setCounter)함수는, 함수가 실행되면 내부에서 ReactDom.Render 를 호출한다.

counter의 상태값이 바뀔때 마다, 즉 setState를 호출 할때마다 ReactDom.Render함수또한 같이 호출 되기 때문에 우리는 이제 버튼을 클릭 하였을때 counter가 올라가는 것을 확인 할 수 있다.

## 요약하자면...

처음 Counter 예제에서 버튼을 눌렀을때 카운터가 올라가지 않는 이유는 간단하다.

실제 HtmlElement를 건드린 적이 없기 때문이다.

객체인 JSXElement를, ReactDom.render를 이용해서 실제 HtmlElement로 파싱한 후 DOM에 렌더링을 해주어야 화면에 값이 바뀌는것을 확인 할 수 있다.


React 사용시 흔한 실수 - 화면의 값이 바뀌지 않는 이유


### 원형 큐를 사용하는 이유

1\. dequeue시 shift 연산을 하지 않는다. 따라서 배열 인덱스를 재배치할 필요가 없기 선형 큐에 비해 메모리 사용량이 훨씬 적다.

### 원형 큐 구현

#### 1\. 배열 생성

```js
const size = 5;
const cq = Array(size).fill(null);
```

사이즈가 5인 배열을 만들고, null로 해당 배열을 채워보자. 시각화하면 아래와 같다.

![relation](/images/posts/circular-queue-javascript/R1280x0.png)

---

#### 2\. 포인터 생성

큐에서는 두종류의 포인터가 필요하다.

1\. enqueue시 삽입할 위치를 가르키는 포인터

2\. dequeue시 삭제할 위치를 가르키는 포인터

보통 1을 front, 2를 rear라고 많이 하는것 같아, 이글에서도 그렇게 부르도록 하겠다. (head & tail 과 같은 식으로 불러도 개념은 똑같으니, 상관은 없다.)

```js
let front = 0;
let rear = 0;
```

![relation](/images/posts/circular-queue-javascript/R1280x0-2.png)

(여기서, front === rear 이면 원형 큐가 비어있음을 알 수 있다.)

```js
const isEmpty = () => rear === front;
```

---

#### 3\. enqueue 

enqueue하기 위해, 포인터들의 위치를 결정해야 하는데, 이때 나머지 연산자(%)를 사용한다.

(정수 % queue의 size)의 연산을 하게되면, queue의 size안에서 순환하는 인덱스를 얻을수 있다.

```js
const enqueue = (item) => {
  cq[rear] = item;
  rear = (rear + 1) % size;
  return item;
};

enqueue("a");
```

현재 rear의 위치에 a를 삽입하고 rear를 한칸 앞으로 옮긴다.

![relation](/images/posts/circular-queue-javascript/R1280x0-3.png)

```
enqueue("b")
```

![relation](/images/posts/circular-queue-javascript/R1280x0-4.png)

```
enqueue("c")
```

![relation](/images/posts/circular-queue-javascript/R1280x0-5.png)

---

#### 4\. dequeue 

dequeue는 front 포인터가 가르키는곳의 요소를 제거하고, front를 1칸 앞으로 이동시킨다.

```js
const dequeue = () => {
  const val = cq[front];
  cq[front] = null;
  front = (front + 1) % size;
  return val;
};
dequeue();
```

![relation](/images/posts/circular-queue-javascript/R1280x0-6.png)

---

#### 5\. 버퍼 공간 생성 & isFull

만약 아래처럼 dequeue를 한번도 하지않고 enqueue를 계속해서 실행하면, front와 rear의 위치는 같아지게 될것이다.

```js
enqueue("a");
enqueue("b");
enqueue("c");
enqueue("d");
enqueue("e");
```

![relation](/images/posts/circular-queue-javascript/R1280x0-7.png)

앞서서, isEmpty를 아래와 같이 정의 하였는데,

```js
const isEmpty = () => rear === front;
```

위 논리대로 라면, 배열이 꽉 차있는데도 Empty가 true가 된다.

이를 방지하기 위한 테크닉으로, 배열 한칸을 추가해 항상 비워놓고 사용 하지 않는다.

사이즈가 n인 원형큐를 만들고 싶다면, n+1의 배열을 생성하면 되는것이다.

```js
const size = 6;
const cq = Array(size).fill(null);

...

enqueue("a")
enqueue("b")
enqueue("c")
enqueue("d")
enqueue("e")
```

![relation](/images/posts/circular-queue-javascript/R1280x0-8.png)

위와같이 구조를 변경한다면, 현재 상태가 Full인지 혹은 Empty인지 명확하게 알 수 있다.

```js
const isFull = () => (rear + 1) % size === front;
```

---

#### 6\. 전체 코드

#### \*\*JS

더보기

```js
const size = 6;

const cq = Array(size).fill(null);

let front = 0;
let rear = 0;

const isEmpty = () => rear === front;

const isFull = () => (rear + 1) % size === front;

const enqueue = (item) => {
  if (isFull()) {
    console.log("큐가 가득참");
    return;
  }
  cq[rear] = item;
  rear = (rear + 1) % size;
  return item;
};

const dequeue = () => {
  if (isEmpty()) {
    console.log("큐가 비어있음");
    return;
  }
  const item = cq[front];
  cq[front] = null;
  front = (front + 1) % size;
  return item;
};

/* 큐의 가장 앞에있는 요소를 얻음 */
const peek = () => cq[front];

/* 큐의 모든 요소가 null이 될때까지 dequeue를 실행 */
const clear = () => {
  while (true) {
    if (!dequeue()) break;
  }
  front = rear;
};
```


React State - 객체 중복 피하기

React - 부모 요소 이벤트 방지하기, Event Bubbling, Capturing, and Propagation

React State - 사용하지 말아야 하는 경우

React 사용시 흔한 실수 - 화면의 값이 바뀌지 않는 이유

Circular Queue(원형 큐) javascript