React-Study
총 28개의 포스팅이 있습니다.
리액트 라우터로 라우팅 기능 사용하기
MPA(Multi Page Application)은 url이 바뀔 때 마다 서버에서 html을 받아와 웹 브라우저에 출력하는 방식으로 구현된 웹 어플리케이션이다.서버에서 html을 계속 받아오므로, SSR(Server Side Rendering) 방식이 잘 맞다.
#React#router2026-02-03
전역 상태 관리(Context API, Redux Toolkit, Zustand)
리액트의 상태 관리 방식은 크게 로컬 상태 관리와 전역 상태 관리로 나눌 수 있다. 로컬 상태 관리 로컬 상태 관리는 useState나 useReducer와 같은 훅을 사용하여 각 컴포넌트에서 상태를 관리하는 것을 말한다.
#ContextAPI#React#redux-toolkit#zustand2026-02-02
컴포넌트 최적화
성능을 최적화 하는 방법에는 웹 최적화와 리액트 특화 최적화가 있는데, 자습서에서는 리액트 특화 최적화 방법을 다룬다. 리액트를 최적화하는 방법은 크게 메모이제이션, 로딩 성능 최적화(코드 스플리팅), 렌더링 우선순위 조정 세 가지가 있다.
#React#최적화2026-01-23
useId와 useEffect(컴포넌트 생명주기)
고유 아이디를 생성하는 useId와 사이드 이펙트를 관리하는 useEffect에 대해서 알아봤다. useEffect의 경우 사용하는 여러 사례들도 참고용으로 정리해두었다.
#React2026-01-13
할 일 앱 실습 - 로직
할 일 앱 실습에서 디자인 다음으로 예제 코드와 비교한 것은 로직이였다. svg, 기능, 폼 요소를 기준으로 컴포넌트를 나누는 기준과 그 밖의 로직의 차이점을 비교해보았다.
#React2026-01-07
할 일 앱 실습 - 디자인
할 일 앱 실습을 답을 보지 않고 진행한 후, 직접 작성한 코드와 예제 코드의 디자인 부분(html, css)을 비교하였다.
#CSS#React2026-01-07
로그인 UI 실습
폼 다루기 챕터 마무리 실습으로 로그인 UI Validation 로직을 짜는 예제가 나왔다.
#React#TailwindCSS2025-12-31
폼 다루기 - 폼 요소 컴포넌트 분리와 리액트 19 이후 ref(클린업)
폼 요소(ex. input, textarea)를 별도의 컴포넌트로 분리하여 사용할 수 있다. 리액트의 ComponentPropsWithRef 타입을 사용하면 HTML 태그가 가지고 있는 모든 속성을 가지고 올 수 있고, 이걸 컴포넌트의 Props로 지정하여 사용한다.
#React2025-12-29
폼 다루기 - 폼 밸리데이션(validation)
폼 밸리데이션이란 form 태그 내부에서 작성한 값이 유효한지 체크하는 로직을 말한다. 기본 밸리데이션 리액트에서 HTML5의 기본 폼 검증 기능을 사용할 수 있으며, 이 기능을 사용하면 별도의 로직 작성 없이 간단한 유효성 검사가 가능하다.
#React2025-12-29
폼 다루기 - 폼 상세 제어(포커스, 커스텀 훅)
제어 컴포넌트를 사용할 때 useRef를 활용하면 폼 요소에 포커스를 주거나 스크롤을 이동하는 동작을 수행할 수 있다.
#React2025-12-29
폼 다루기 - 비제어 컴포넌트 방식
비제어 컴포넌트 방식은 useRef를 사용해 dom의 ref에 직접 접근해서 값을 가져와 폼을 제출하는 방식을 말한다. 상태를 리액트가 관리하지 않고 DOM 자체에서 관리하도록 내버려 두기 때문에 비제어라고 부른다.
#React2025-12-27
폼 다루기 - 제어 컴포넌트 방식
제어 컴포넌트 방식은 리액트의 상태를 폼 요소의 value와 연결해서 폼을 제어하는 것이다. 폼 요소의 값이 바뀌면 리액트는 바뀐 값을 확인하고 컴포넌트를 재렌더링한다.
#React2025-12-27
폼 개념
폼이란 사용자가 상호작용하여 내용을 입력하는 UI를 말한다. 폼 요소에는 text, checkbox, radio, textarea 등이 있다. 폼 요소를 사용할 때는 <form> 태그 안에서 사용하는 것이 좋다.
#React2025-12-27
사용자 목록 실습
사용자 목록을 동적 렌더링하는 실습을 진행했다. 버튼을 눌러서 필터링이 가능한 사용자 목록 출력 페이지를 만드는 실습이다.
#React2025-12-27
동적 렌더링 - 반복 렌더링
반복 렌더링이란 갯수가 변할 수 있는 데이터를 동적으로 렌더링하는 것을 의미한다. JSX 속성으로 key를 사용하면 반복 렌더링으로 만들어진 컴포넌트를 개별적으로 구분할 수 있다. key는 반드시 고유한 값을 가져야하며, 변하지않는 값이 좋다.
#React2025-12-27
동적 렌더링 - 조건부 렌더링
조건부 렌더링은 자바스크립트의 문법 중 조건 표현식을 사용하여 컴포넌트의 상태에 따라 동적으로 렌더링 하는 것을 의미한다. 자바스크립트 조건 표현식 중 조건부 렌더링에 주로 사용하는 것은 if문, 삼항 연산자, AND 논리 연산자 이다.
#React2025-12-27
계산기 실습
계산기 만들기 실습 예제가 있어, 예제 코드를 확인하기 전 먼저 코드를 짜보고 예제와 비교해보았다. 계산기는 간단한 사칙연산이 가능한 웹 계산기로, 샘플은 아래와 같다. 그리고 이건 내가 만든 계산기다. 자습서의 흑백 사진을 보고 만들었더니 색상이 많이 다르다.🤔
#CSS#React2025-12-20
리액트 스타일링 - 이미지, 웹 폰트 렌더링
리액트 앱에서 이미지를 렌더링 하기 위해서는 public 폴더나, src 폴더에 이미지를 저장한다. pubilc 폴더에 이미지를 넣어 렌더링하면, 빌드 과정을 거치지 않고 이미지 자체가 앱에 정적 리소스로 포함된다.
#CSS#React2025-12-19
리액트 스타일링 - Tailwind CSS
Tailwind CSS는 요즘 리액트 스타일링에서 각광받고 있는 유틸리티 퍼스트 스타일링 라이브러리이다. 유틸리티 퍼스트란 스타일 속성을 가장 작은 단위로 쪼개어 재사용 가능한 클래스로 만들어두고, 이를 조합해서 사용하는 것을 말한다.
#CSS#React#TailwindCSS#TailwindCSS설치2025-12-19
리액트 스타일링 - CSS-in-JS
CSS-in-JS 방식은 정통 스타일 방식이였던 html, js, css로 분리하여 스타일을 적용하는 것이 아닌, js 내부에서 css를 정의하는 방식이다.
#CSS#React2025-12-19
리액트 스타일링 - 전통적인 방식
리액트 컴포넌트의 스타일을 지정하는 방법은 여러가지가 있는데, 전통적인 방식(CSS 파일 활용)으로는 인라인 스타일, 글로벌 스타일, CSS 모듈 세 가지로 나눌 수가 있다.
#CSS#React2025-12-18
컴포넌트 상태
리액트의 상태란 값이 바뀔 때 마다 화면이 리렌더링되는 변수를 말한다. 리액트 컴포넌트 내부에서 let, const로 선언된 변수는 값을 바꿔도 리액트가 인식하지 못해 컴포넌트가 리렌더링 되지 않는다. 즉 변수 값을 바꿔도 화면에 반영이 되지 않는다.
#React2025-12-18
컴포넌트 이벤트
JSX 엘리먼트를 사용하면 html dom 엘리먼트(ex. button)처럼 이벤트를 사용할 수 있다. 대표적인 예는 버튼에 이벤트 속성과 이벤트 핸들러를 연결하여 버튼을 클릭할 때 함수를 호출하는 것이 있다.
#React2025-12-15
컴포넌트 Props
Props 개념 부모는 자식에게 props를 이용하여 데이터를 전달할 수 있다. props는 HTML의 속성처럼 컴포넌트의 태그 안에 입력되며, 여러개의 속성을 전달해도 항상 props 하나의 객체로 전달 된다.
#React2025-12-15
컴포넌트 개념
컴포넌트는 UI와 로직을 재사용할 수 있는 단위임. 보통 웹을 추상화하여(기능 단위로 나누어) 페이지를 여러 섹션으로 나눌 때, 하나의 섹션이 하나의 컴포넌트가 됨. 하지만 렌더링이 자주 일어나거나 성능 최적화가 필요하면 더 작게 컴포넌트를 나눌 수 있음.
#React2025-12-14
JSX 개념
JSX는 js의 문법 확장이므로 js 내부에서는 어디에서든 사용할 수 있음. 예를 들어 변수에 JSX를 저장해서 리턴 내부에서 사용하는 것도 가능함.JSX를 반드시 써야하는 것은 아님. 원래는 리액트의 createElement 메서드가 원형인데,
#React2025-12-14
리액트 개발 환경 설정
간단하게 리액트 개발 환경 설정하는 방법을 정리하였다. 리액트 개발 환경 설치 Node.js 설치 IDE(ex. VSCode) 설치 웹 브라우저 설치
#React2025-12-10
리액트의 핵심철학
리액트는 틀에 갇혀있지않은 확장성을 강조하기 위해 프레임워크라는 칭하는 것은 지양하고 라이브러리라는 용어를 사용한다고 한다. 오늘 포스팅에서는 자습서에서 소개하는 리액트의 핵심철학인 컴포넌트 기반 아키텍처, 가상 DOM, 선언적 프로그래밍 3가지를 정리해보려고 한다.
#React2025-12-10