<dt>리스트 렌더링(list rendering)</dt>
      <dd>
        <p>상태 메시지(status message) 배열을 리스트 렌더링합니다.</p>
        {/* <ul className="renderList">{renderList()}</ul> */}
        <ul className="renderList">
          {statusMessage.map((message) => {
            return <li key={message}>{message}</li>;
          })}
        </ul>
      </dd>
      <dd>
        <p>상태 메시지(status message) 배열을 역순 정렬하여 렌더링합니다.</p>
        <ul className="renderList">
          {statusMessage.reverse.map((message) => (
            <li key={message}>{message}</li>
          ))}
          {/* {renderList({ reverse: true })} */}
        </ul>
      </dd>
      <dd>
      

리버스 후 맵을 하면 될 줄 알았더니
이상한 결과가 나왔다

리약트에서는 같은 원본을 파괴 하는 문법을 사용하면 문제가 발생한다.

<ul className="renderList">
        {statusMessage.map((message) => (
            <li key={message}>{message}</li>
          )).reverse()}
        {/* {renderList({ reverse: true })} */}
</ul>

이렇게 원본을 파괴하지 않는 방식으로 처리해야 한다.

---

레이아웃이 깨짐
정상적으로 출력
div를 써야 레이아웃이 무너지지 않음
무분별한 div 사용은 지양해야 하지만, 레이아웃의 목적으로는 div를 사용해도 괜찮다

---

⬇️⬇️⬇️

spread syntax를 사용하여 한번에 인자를 전달할 수 있다.

---

사이드 이펙트

사이드 이펙트(side effect)는 주로 프로그램의 실행 흐름과 관련하여 발생하는 다른 부수적인 동작들을 의미
사이드 이펙트는 주로 함수나 메서드의 호출로 인해 발생하며, 해당 함수 또는 메서드가 미치는 영향을 함수 외부로 전달한다

일반적인 사이드 이펙트 발생 상황

• 외부 상태 변경: 함수나 메서드가 외부 변수나 객체의 상태를 변경할 때 발생합니다. 이로 인해 다른 부분에서 예상치 못한 결과가 발생할 수 있습니다.

• I/O 작업: 파일 읽기/쓰기, 네트워크 요청 등의 I/O 작업은 사이드 이펙트를 일으킬 수 있습니다. 이러한 작업은 비동기적으로 처리되는 경우가 많기 때문에 프로그램의 흐름을 예측하기 어렵게 만들 수 있습니다.

• 예외 처리: 예외(Exception)가 발생하면 프로그램의 흐름이 예상치 못한 방향으로 변경될 수 있습니다.

• 출력: 화면에 출력이나 로그를 남기는 작업도 사이드 이펙트에 해당합니다.

잊지말자!!!!!!

---

23.08.14 TIL

컴포넌트 생명주기

23.08.15 TIL

리액트에 스냅샷으러 저장된 상태는 다음 렌더 전까지 그대로 값이 유지된다.
그러므로 이벤트 핸들러의 코드가 비동기로 처리된다고 해도 상태변수의 값은 렌더 영역 내에서 절대 변경되지 않는다.
리액트는 해당 렌더의 이벤트 핸들러 내에서 상태 값을 고정한 채 유지한다.

리액트는 상태 업데이트를 처리하기 전 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다.
이 점이 setNumber() 상태 업데이트 함수가 모두 호출된 후에야 다시 렌더링이 발생하는 이유다

이러한 특징으로 인해 첫 버튼으로 폼이 비활성화 된 경우 두 번째 클릭에 의해 폼이 다시 제출되지 않을가 걱정할 수도 있지만 각 이벤트는 개별적으로 처리되고 안전한 경우에만 일괄처리(batching)를 수행하기 때문에 걱정할 필요가 없다.

이름 작성 규칙 -> 해당 상태 변수의 첫 글자로 업데이트 함수 매개변수의 이름으로 지정하는 것이 일반적!!!