🧩배경react 19 에 도입된 `useActionState` hook 학습한뒤 해당 hook을 활용한 예시를 만들어보았다.🧩useActionState 특징`useActionState`는 form action의 결과를 기준으로 state를 업데이트 하는 훅`const [state, formAction, isPending] = useActionState(fn, initialState, permalink?)` 와 같이 사용Canary versions 에서는 `useFromState`로 불림hook이지만 서버컴포넌트에서도 사용 가능하다.  반드시 tag 내부에서 사용해야함 🧩활용예시`useActionState`를 이용하여 위와 같은 화면을 만들어 보았다. 위 화면의 동작 흐름은 아래와 같다.첫 화면 렌..

🧩배경Nextjs를 사용하면서 자연스레 서버컴포넌트를 사용해왔지만 따로 포스팅으로 정리하는 시간을 가지진 않아 각잡고 React 공홈에서 Server Component 파트를 읽고 정리해보는 시간을 가졌다. 🧩React 19 부터 stable react 18v Server Component Part를 보면 Canary 표시가 되어있는데 19v부터는 사라졌고 stable이라고 언급되었다. 🧩소스코드로 비교아래에는 React 19 공식 홈페이지에 올라온 예시코드로 같은 기능을 클라이언트 컴포넌트, 서버 컴포넌트 각각 이용해서 구현했을 때의 소스코드이다. 보면서 느끼겠지만 서버 컴포넌트가 훨씬 코드가 짧고 개인적으로 더 직관적이다. ( 물론 이외에도 여러 장점/단점이 있다. ) 클라이언트 컴포넌트로 구현..

React useState 호출 시 무조거 렌더링이 된다?정답은...! 아니다 입니다.1. state가 원시타입일 경우 (Number, String, boolean, null, undefined ) -> setState 호출 이전의 state값과 새롭게 갱신된 state 값을 비교( 이전값 === 새로운값) 한 뒤 같지 않으면 렌더링이 이뤄지고 아니면 렌더링이 발생하지 않습니다. 2. state가 원시타입이 아니고 참조 타입(object, Symbol) 일 경우 ->위와 같은 방식으로 값 자체를 비교하지 않고 메모리 주소를 비교하여 렌더링이 발생할지 말지를 결정합니다. 실제론 동일한 형태의 객체여도 렌더링이 발생할 수 있다는 말이죠   export const Component =() =>{ cons..