들어가며 최근 회사에서 리액트로 개발하는 도중 무분별한 리렌더링이 발생하는 이슈를 겪었다. 대표적으로, 사용자가 문의사항을 남기는 페이지에서 문의 내용을 입력할 때마다 다른 인풋이 깜빡거리는 현상이 발생했다. 이 깜빡거리는 현상의 원인은 문의 내용 입력 시 content state 의 업데이트로 컴포넌트가 리렌더링되었기 때문이었다. 리액트는 상태의 변경에 따라 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 렌더링의 대상이 된다. 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 렌더링이 일어난다고 한다. 리액트의 특성상 content state 가 업데이트되었는데 다른 인풋 또한 불필요하게 렌더링이 발생한 것으로 예상된다. 위와 같은 리렌더링 이슈를 막기 위해 해..

서버 사이드 렌더링(SSR) SSR : Server Side Rendering 전통적인 웹 어플리케이션은 서버 사이드 렌더링 방식을 사용한다. 서버 사이드 렌더링의 동작 방식 요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. 서버 측에서 HTML & View를 생성하여 응답한다. 서버 사이드 렌더링의 장점과 단점 1. 장점 1-1. 검색엔진최적화(SEO)가 가능하다. 1-2. 성능 개선(첫 로딩이 매우 짧다.) 첫 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기로딩속도를 많이 줄여줄 수 있다. 사용자가 처음부터 사이트의 정적인 컨텐츠를 이용할 수 있다. (단, 사용자 인터랙션 부분은 제외) 동적인 부분은 자바스크립트 파일을 불러오고 렌더링 작업이 완료되면 이용할..