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의 사용 등을 포함한 다양한 문제를 감지하는 도움을 줍니다. 두 번의 렌..
HTML Entity 의 종류 출력문자 HTML입력 문자열 > (띄어쓰기) & & " " ' ' © © Escape HTML에서 자주 사용되는 특수문자들은 HTML 자체에서 걸러서 인식을 하여 화면에 출력이 되지 않는다. 그렇다면 그러한 특수문자들을 출력하고자 할때 위에 있는 표와 같이 입력을 하면 출력이 되는데 그것을 Escape 또는 Escaping이라고 한다.