코딩을 잘하고 싶은 코린이 동토니

최근 Next.js를 도입하는 기업들이 많아졌다. 그 이유는 뭘까? 나는 당연코 Server Side 방식의 지원이라고 생각한다. 그러면 Server Side는 무엇일까? 먼저 Server Side를 살펴보기 전에 이와 상반되는 개념인 Client Side Rendering (이하 CSR)에 대해서 알아볼 필요가 있다. Client Side Rendering (CSR) CSR은 말그대로 클라이언트 측에서 렌더링이 시작되는 개념이다. 즉 클라이언트가 페이지에 들어오고 브라우저는 이를감지하고 HTML 다운로드 => JavaScript 다운로드 => JavaScript 실행 => Data 호출 => 화면 노출 의 순으로 렌더링이 진행된다. 간단하게 요약하면 클라이언트가 그린다 그린다? : 데이터를 가져와서 그..

state란? state는 변경될 수 있는 데이터를 말한다. (Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.) 즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다. Props? 이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. state 접근 state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다. class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. state 예시 counter.js im..