React3 [React] Next.js Error (Waring: Expected server HTML to contain a matching <header> in <html> next js에서 프로젝트를 진행하고 있는데 npm run dev를 통해 페이지를 출력하는데 위의 사진과 같은 에러가 발생했다.이 에러는 페이지는 출력되지만 따로 에러만 발생해서 확인할 수 있다에러가 왜 발생했는지 자세하게 확인하기 위해 맨 밑 줄에 "See more info here: https://nextjs.org.docs.message/react-hydration-error" 부분을 확인해보자. 페이지를 확인해보면 아래와 같은 화면을 볼 수 있다. Common Causes를 확인해보며 다양한 구글링을 통해 문제를 해결해보려 했다.결론적으로 말하면 내가 발생한 에러는 1번에 해당하는 HTML 태그가 잘못 중첩된 경우에 해당되었다.다른 사람들이 쓴 포스팅을 확인해보면 2번의 문제로도 발생할 수 있는 .. 2024. 2. 27. [React] React Hooks 1. React Hooks 란? 리액트 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다.리액트 초기에는 일반적으로 함수형 컴포넌트를 사용하였으나, 값의 상태를 관리하거나 Life Cycle Method를 사용해야 할 때 클래스형 컴포넌트를 사용하였다. 하지만 클래스형 컴포넌트의 경우 아래와 같은 단점이 있었다. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.복잡한 컴포넌트들을 이해하기 어렵다.Class는 사람과 기계를 혼동시킨다(this 키워드 등)이와 같은 문제를 해결하기 위해 리액트는 Hook을 도입하여 class를 작성하지 않고 State와 다양한 React의 기능들을 함수형 컴포넌트에서도 사용 가능하게 만든 기능이다.즉.. 2024. 2. 14. [React] React의 특징 V-DOM(Virtual DOM) 1. DOM 이란?DOM은 Document Object Model(문서 객체 모델)의 약자로, 웹 브라우저 안에서 HTML 문서에 "html 태그"들을 JavaScript가 접근과 조작할 수 있도록 메모리에 보관할 수 있는 객체로 만든 것이다. 즉 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미하며 DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 하고 있다.2. 기존 웹 브라우저 렌더링 방식과 발생할 수 있는 문제점2-1. 기존 브라우저 렌더링 방식DOM Tree 형성 : 서버에서 보낸 HTML 파일을 브라우저가 해석(Parsing)하여 DOM 트리를 만든다.CSSOM Tree 형성 : 서버에서 보낸 CSS 파일을 브라우저가 해석(Par.. 2024. 2. 6. 이전 1 다음
