Hook`Hook`은 `React 16.8` 부터 생긴 기능으로, 기본 `React Class` 컴포넌트에서 제공하던 상태관리 기능 및 생명주기 함수를 함수형 컴포넌트에서 사용할 수 있게 해주는 기능입니다. `Class Component` 에서 상태관리 기능은 `this.state` 와 `this.setState` 두 가지로 관리할 수 있었습니다. 하지만 함수형 컴포넌트에서는 사용이 불가한 상황으로 `useState`, `useEffect` 두 가지로 클래스 컴포넌트와 같은 함수들을 사용할 수 있도록 한 것이 `Hook` 입니다. 클래스 생명주기 함수들에서 변경이 일어나면 어떠한 작업이 일어나는데 이러한 작업들을 `side effect`라고 지칭하고 있습니다. 이러한 `side effect`에 대한 부..
state`state`는 `JSX`에서 제공하는 컴포넌트 내에서 상태를 관리하기 위해 사용되는 기능입니다. `Hook` 기능이 개발이 되기 전까지는 클래스 컴포넌트 내에서 모든 `state` 생명주기를 관리 해왔습니다. 그렇기 때문에 오래된 문서를 보게 되면 제어 컴포넌트를 생성하게 되면 클래스 컴포넌트를 활용해 개발하는 것을 볼 수 있습니다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocal..
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. Element`Element` 는 React앱의 가장 작은 단위를 의미합니다. 브라우저 `DOM` 엘리먼트와 달리 `React` 엘리먼트는 일반 객체(plain object)를 의미합니다. `React DOM`은 `React` 엘리먼트와 일치하도록 `DOM`을 업데이트합니다.주의더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있습니다. 혼동 되지 않도록 주의합시다 `React` 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 특정 시점의 `UI`를 보여줍니다. 다음은 `DOM root`에서 생성되는 엘리먼트가 어떻게 렌더링 될 수..
JSX란?`React` 문서에 따르면 아래와 같습니다React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 쉽게 말하면 `JavaScript`에서 `HTML` 태그를 작성 가능하게 하여 하나의 `JS` 파일에서 모든 내용을 작성 가능하게 한 기술을 말합니다. JSX의 특징위의 설명과 같이 `JS`문법과 태그를 같이 사용이 가능합니다 `JSX`도 `JavaScript`에서 인식하는 객체이므로 함수를 호출 할 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName;}const user = { firstNa..
개요 이번에 회사에 사용되는 기술인 Next.js를 공부를 하면서 처음으로 궁금해 했던 문제가 왜 두 번의 렌더링을 수행하는 가? 였습니다. 매번 콘솔 로그가 두번씩 찍히는 모습이 마치 개발자가 잘 못 해서 그런 것 아닐까 라는 생각을 들게 했고 이러한 현상이 왜 발생하는지에 대해 공부해봤습니다. React Stric Mode 먼저 기술에 대한 이해를 하기전에 알아야 하는 것은 StricMode가 무엇인가를 알아야 합니다. StricMode 란 개발자가 애플리케이션에서 잠재적인 문제를 더 쉽게 발견할 수 있도록 만들어진 기능입니다. 이 모드는 개발 과정에서만 활성화되어, 성능 저하, 안전하지 않은 생면주기 메서드 사용, 레거시 API의 사용 등을 포함한 다양한 문제를 감지하는 도움을 줍니다. 두 번의 렌..
개요 백엔드를 주 개발을 하면서 뷰까지 개발하게 되면 `SSR`을 사용하게 되는데, 이러한 `SSR`을 사용하게 되면 문제는 실시간으로 반영되는 데이터를 유저에게 보여줄 수 없다는 것입니다. 그렇다면 유저는 당연하게도 원하는 데이터를 화면에서 보기 위해서 페이지 새로고침을 해야 한다는 것입니다. 이러한 문제를 해결하기 위해서 사용되는 방식은 `SSE`와 웹소켓인데 이번 그 중에서 `SSE`를 `Nest.js`로 구현하면서 이해 해보고자합니다. SSE vs Web Socket 기술을 사용하기 전에 실시간 통신을 하기위해 사용되는 `SSE`와 `Web Socket`은 어떠한 차이가 있는지 알아 보고자 합니다. SSE `단방향 통신` : SSE는 오로지 서버에서 클라이언트 쪽 서버로만 데이터를 보낼 수 있는 ..