react4 [React] Hook이 대체 뭐야? (useState, useEffect) 리액트 훅(Hook)이란?저번에 컴포넌트에 대해서 간단하게 설명했을 때 안한 얘기가 하나 있다.컴포넌트는 크게 두 가지 유형으로 나뉜다.클래스형 컴포넌트와 함수형 컴포넌트이다.클래스형 컴포넌트는 예전부터 사용하던 방식으로, 이름처럼 ‘클래스’ 라는 문법으로 만든다. 기능은 많지만 코드가 조금 길고 복잡하게 느껴질 수 있다.함수형 컴포넌트는 비교적 최근에 등장해 대세가 된 방식이다. ‘함수’ 형태로 훨씬 간결하고 직관적으로 컴포넌트를 만들 수 있다.이 함수 컴포넌트는 마치 ‘주문을 받으면 특정 모양의 레고 블록(UI)을 만들어서 내놓는 간단한 기계’ 와 같다.그런데 이 간단한 기계에는 몇 가지 치명적인 단점이 있다.기억력이 없다. (Stateless) : 버튼을 몇 번 눌렀는지, 사용자가 입력창에 무엇을 .. 2025. 6. 30. [React] 리액트 렌더링에 대해서 리액트의 렌더링이란?지난 컴포넌트에 대해서 설명할 때, 컴포넌트가 마치 레고 블록과 같다고 설명했다.그렇다면 렌더링은 이 레고 블록을 조립해서 눈에 보이는 ‘집’을 만드는 과정이라고 할 수 있다.컴퓨터가 리액트 컴포넌트라는 코드를 읽어서 우리가 실제로 보는 웹사이트 화면으로 그려주는 작업을 바로 ‘렌더링’이라고 부른다.리액트 렌더링 과정리액트로 만든 웹사이트를 하나의 거대한 ‘레고 전시장’ 이라고 상상해보자. 우리가 웹사이트 주소를 딱 치고 들어가는 순간은, 이 전시장에 처음 입장하는 것과 같다.index.html - “텅 비어있는 전시장”모든 웹사이트는 사실 HTML 이라는 뼈대로 이루어져 있다. 리액트 프로젝트 폴더를 열어보면 public 폴더 안에 index.html 이라는 파일이 있을거다.이 in.. 2025. 6. 27. [React] 리액트에서 컴포넌트(Component)란? 컴포넌트(Component)란?리액트 에서 컴포넌트를 말하자면 ‘레고 블럭’과 같다고 할 수 있다.우리가 레고로 어떠한 건물이나 오브젝트를 만들 때, 다양한 모양과 크기의 블록을 가지고 조립을 한다.리액트로 웹사이트나 애플리케이션을 만드는 것도 이와 비슷하다.여기서 각각의 레고 블록 역할을 하는 것이 바로 컴포넌트이다.좀 더 자세히 알아보자컴포넌트는 UI를 구성하는 독립적인 최소 단위이다.네이버 홈페이지를 생각해보자검색창 (SearchBar 컴포넌트)뉴스 헤드라인 (NewsHeadline 컴포넌트)쇼핑 추천 상품 (ShoppingItem 컴포넌트)로그인 폼 (LoginForm 컴포넌트)이 모든 것이 각각 하나의 컴포넌트가 될 수 있다.이렇게 쪼개진 컴포넌트들을 합쳐져서 하나의 페이지가 완성되는거다.컴포넌.. 2025. 6. 27. [React] React-Quill Editor 적용하기 현재 리액트 공부를 하고 있다. 다음 프로젝트에서 아마 front 단을 리액트로 할 예정이다. 우선 처음에 할 때는 역시 CRUD 부터 하는 거다. 모든 웹에선 CRUD가 기본이다. 그래서 게시판 글 작성부터 할 예정이다. 사실 이전에 React 공부를 하다 말았었다. 그 때는 웹 공부 한창할 때라 이것저것 건들려봤다. (최근까지 바빠서 공부를 못했지만,,,) 이미 세팅은 다 되어있다. back단은 spring boot로 되어 있고, DB는 Maria DB를 쓰고 있다. JPA 대신 마이바티스를 쓰고 있다. JPA는 아직까지 어색하다. 아무튼 게시판 글 작성 목적으로 Editor를 찾다가 React-Quill 이란 걸 알게 됐다. 예전에 할 때 Tosat-UI에서 나온 Editor를 사용했다. 근.. 2025. 5. 2. 이전 1 다음
