React 3

[React] 마크다운 프리뷰어 만들기

1. 마크다운의 탄생 배경: 왜 필요했을까? 우리가 흔히 사용하는 워드 프로세서는 WYSIWYG (What You See Is What You Get, 보이는 대로 얻는다) 방식을 사용합니다. 버튼을 클릭하면 굵게, 기울임꼴, 목록 만들기 등 복잡한 서식 변경이 즉각적으로 눈에 보이게 적용되죠. 하지만 웹 세상은 조금 다릅니다. 초기 웹에서는 HTML이라는 마크업 언어를 사용해야만 글에 서식을 적용할 수 있었습니다. 안녕하세요! 이것은 굵은 글씨와 기울임꼴 입니다. 목록 아이템 또 다른 아이템 보시다시피 HTML은 태그가 많아 다소 번거롭고, 글 자체의 가독성을 해치기도 합니다. 글을 쓰기 위한 목적보다는 문서의 구조를 정의하는 데 더 초점이 맞춰져 있었죠. 이런 불편함을 해소하기 위해 200..

React 2025.06.23

[React] useReducer 사용하여 간단한 계산기 만들기

useReducer 란 무엇일까요? useState의 대체재이며 복잡한 상태 로직을 컴포넌트 외부로 분리하는 상태 관리 훅입니다. Reducer: (주방장/레시피북): 상태를 어떻게 변경할지에 대한 '로직'이 담긴 순수 함수.Action: (주문서): 상태 변경을 요청하는 '명령'이 담긴 객체. (type, payload)Dispatch: (웨이터): Action을 Reducer에게 전달하는 '함수'.(컴포넌트 UI) → dispatch(action) → (Reducer) → (새로운 State) → (컴포넌트 UI 업데이트) 그럼 왜 useReducer 을 사용할까요?1. "UI를 그리는 코드"와 "데이터를 처리하는 로직"이 분리되어 컴포넌트가 훨씬 깔끔해지고 본연의 역할(렌더링)에 충실해집니다.2. ..

React 2025.06.16

[React] 리액트로 Todo-List (투두리스트) 만들기

리액트란 무엇일까요?사용자 인터페이스 (UI)를 만들기 위한 자바스크립트 라이브러리 입니다. 1. 사용자 인터페이스: 우리가 웹사이트나 앱에서 보는 모든것, 즉 버튼, 입력창, 메뉴, 사진 등 화면에 보이는 모든 요소를 의미합니다.2. 자바스크립트 라이브러리: '프레임워크'가 아닌 '라이브러리'라는 점이 중요합니다. 프레임워크가 집을 짓는데 필요한 모든 것(설계도, 규칙, 도구)을 제공하는 '풀세트'라면, 라이브러리는 특정 기능(예: 못을 박는 망치)을 쉽게 사용 할 수 있도록 제공하는 '도구'에 가깝습니다. 1. 컴포넌트 (Component): 레고 블록처럼 조립하는 개발리액트는 UI를 '컴포넌트'라는 재사용 가능한 조각들로 나누어 생각합니다.홈페이지를 레고로 만든다고 생각해봅시다.검색창 레고 블록 ?..

React 2025.06.09