코딩고블린 개발블로그 코딩고블린 개발블로그

서버사이드 랜더링, SSR Server-side rendering 서버사이드 랜더링 클라이언트사이드 랜더링 장점 서버로 부터 완성된 웹 페이지를 전달 받기 때문에 검색엔진에 수집, 노출되는데 유리하다. 접속시, 빈 페이지를 먼저 읽어들이기 때문에, 검색엔진에 컨텐츠가 노출되기 어렵다 단점 서버리소스, 스펙이 중요하다. (서버의 요청-응답 속도 등) 필요하지 않은 나머지 페이지(컴포넌트) 코드까지 한꺼번에 읽어들여야 하기 때문에 경우에 따라 초기 로딩속도에서 SSR보다 불리할 수 있다. *적절한 코드 스플리팅으로 해결 가능 리액트에서 서버사이드 랜더링을 하는 방법 1) 직접 세팅 Webpack 커스텀으로 빌드 경로 등을 커스텀 Node express 으로 페이지 라우터 제작 코드 스플리팅 2) Next.j..

Hooks 란? 함수형 컴포넌트에서도 상태(State)를 다룰 수 있도록 제공되는 API 리액트 16.8버전 업데이트 1) useState() 함수형 컴포넌트에서 state를 가질 수 있도록 하는 API 상태의 기본값을 인자로 넣어주며 상태값 – 상태를 설정하는 함수를 쌍(배열) 로 반환한다. 상태가 변경 될 때 마다, 컴포넌트가 다시 랜더링 된다. const [value, setValue] = useEffect(‘initialValue’); 2) useEffect() 컴포넌트가 랜더링 될 때 마다, 원하는 작업을 수행 할 수 있도록 하는 함수 함수의 두번 째 파라미터로 특정 state를 넣는다면, 해당 상태가 업데이트 될 때 마다 함수가 실행된다. 만약 빈 배열을 넣을 경우 첫 랜더링 시에만 실행된다...

Immutability 객체가 생성된 이후 그 상태를 변경하지않는, Immutable(이뮤터블) 하게 다루는 디자인 패턴이다. 리액트에서는 시간적 비용이 어느정도 들더라도, 객체를 불변객체로 만들어 프로퍼티의 직접적인변경을 방지하고, 객체의 변경이 필요한 경우에는 새로운 객체로 복사하여 그 값을 다루도록 한다. 특히 리액트에서는 상태(객체)를 참조 형태로 전달하고 전달받기 때문에, 참조를 통해 전달된 객체들이 예기치 않게 변경되었을때, 프로그램 전반적으로 큰 오류를 야기하는 가능성이 있다. 변경이 이루어진 해당 객체를 구독하고있는 모든 컴포넌트와 로직에 영향을 끼친다. 객체, 상태의 불변성을 유지하며 객체를 합성하는 방법들 1) 스프레드 연산자 활용 handleClick(){ this.setState(s..