[React] 제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트 (Controlled Components)제어 컴포넌트는 React의 상태(state)에 의해 관리되는 컴포넌트로 입력 값이나 UI 상태를 React 컴포넌트의 state에 저장해두고 해당 상태를 바탕으로 UI를 갱신한다.예를 들어 필드의 값이 변경되면 해당 변경을 state로 관리하고 이 state를 통해 값이 제어된다.특징단일 데이터 소스: 입력 필드의 값이 컴포넌트의 state에서 관리되므로 입력 필드와 상태 값이 항상 일치하게 된다.변경 감지 및 처리: 값이 변경될 때마다 onChange 이벤트 핸들러가 실행되어 state를 업데이트하고, 이를 통해 UI가 다시 렌더링된다.간편한 데이터 검증 및 수정: 입력값을 실시간으로 검증하거나 변형하는 로직을 쉽게 구현할 수 있다.import..

• format_list_bulleted React
• · 2024. 11. 11.
• textsms

tailwind css 반응형으로 디자인하기

Tailwind CSS 반응형 디자인Tailwind CSS는 모든 유틸리티 클래스에 반응형 버전을 제공하여 특정 중단점에서 조건부로 적용할 수 있다. 이를 통해 HTML 코드 내에서 다양한 화면 크기에 적합한 레이아웃을 구성할 수 있다. Tailwind CSS 공식 문서의 예시를 먼저 살펴보자. 1. HTML 문서의 에 다음 뷰포트 메타 태그를 추가하여 기기 화면에 맞게 반응하도록 설정한다. 2. Tailwind의 유틸리티 클래스 앞에 중단점 접두사를 붙여 특정 화면 크기에서만 적용되도록 한다. 위의 예시에서는 md와 lg중단점을 사용하고 있다. 중단점은 Tailwind CSS에서 기본적으로 5가지 중단점을 제공한다고 한다.이 중단점들은 모든 유틸리티 클래스에 사용할 수 있어 특정 조건에 맞춰 문자 간격..

• format_list_bulleted CSS
• · 2024. 11. 11.
• textsms

clsx - 클래스를 조건부로 적용해보자

clsx란 무엇인가?clsx는 조건에 따라 여러 CSS 클래스를 조합하여 하나의 문자열로 반환해주는 유틸리티 라이브러리이다. 주로 컴포넌트의 상태에 따라 동적으로 클래스명을 변경해야 하는 상황에서 유용하게 사용된다. clsx의 주요 기능조건부 클래스 적용객체 형태로 조건과 클래스를 전달하여 조건에 따라 클래스가 적용되도록 할 수 있다.여러 클래스의 결합clsx는 문자열, 객체, 배열 등 다양한 형태의 인수를 받아서 하나의 클래스로 결합해준다.중복 클래스 제거동일한 클래스가 중복으로 전달되더라도 clsx는 하나로 처리하여 불필요한 중복을 제거해준다. clsx는 CSS 클래스를 조건에 맞게 효율적으로 구성해주는 유틸리티로 특히 React 개발에서 자주 사용된다. classnames 라이브러리의 대체제로도 많..

• format_list_bulleted CSS
• · 2024. 11. 11.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 2

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: CSS Styling | Next.jsStyle your Next.js application with Tailwind and CSS modules.nextjs.org 다음은 Next.js 애플리케이션 스타일링 방법에 대한 설명입니다. 이번 챕터에서는...다음 주제를 다룹니다. 애플리케이션에 전역 CSS 파일을 추가하는 방법두 가지 스타일링 방법: Tailwind와 CSS 모듈clsx 유틸리티 패키지를 사용해 조건부로 클래스 이름을 추..

• format_list_bulleted Next.js
• · 2024. 11. 10.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 1

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: Getting Started | Next.jsCreate a new Next.js application using the dashboard starter example and explore the project.nextjs.org  새 프로젝트 생성패키지 매니저로 pnpm을 사용하는 것이 npm이나 yarn보다 빠르고 효율적이기 때문에 권장합니다. pnpm이 설치되어 있지 않다면 다음 명령어로 전역 설치할 수 있습니다.npm inst..

• format_list_bulleted Next.js
• · 2024. 11. 10.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Introduction

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Next.js 배우기Next.js 앱 라우터 강좌에 오신 것을 환영합니다! 이 무료 인터랙티브 강좌에서는 풀스택 웹 애플리케이션을 만들어가며 Next.js의 주요 기능을 배울 수 있습니다. Learn Next.js | Next.jsLearn how to build a full-stack web application with the free, Next.js App Router Course.nextjs.org우리가 만들 프로젝트이 강좌에서는 다음과 같은 기능을 포..

• format_list_bulleted Next.js
• · 2024. 11. 9.
• textsms