리액트에서 CSS를 사용할 때에는 다양한 방식을 사용할 수 있다. 그 중 알아볼 몇 가지에 대해 나열해보자면 다음과 같다. 일반CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 일반 CSS 먼저, 리액트로 처음 프로젝트를 생성하게 되면, 다음과 같은 화..
리액트 Hooks는 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 함수 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook이다. useState를 사용하면 함수 컴포넌트 내에서 상태를 선언하고, 이를 갱신할 수 있다. useState 기능을 사용해 숫자 카운터를 구현해보자. import React, { useState } from "react"; function Counter() { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setVa..
이전 게시글 리액트 라이프사이클 이해하기에 이어서.. 리액트 라이프사이클 이해하기 [react/life cycle/typescript] 리액트는 UI 라이브러리로써, 컴포넌트를 기반으로 한 개발 방식을 채용한다. 이런 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전 woongtech.tistory.com 라이프사이클 메서드들을 여러개 사용해서 컴포넌트를 만들어볼 것이다. 컴포넌트 생성 LifeCycleSample 이라는 컴포넌트를 만들 것이다. // src/LifeCycleSample.tsx import React, { useState, useEffect, useRef } from "react"; type LifeCycleSampleProps = ..
리액트는 UI 라이브러리로써, 컴포넌트를 기반으로 한 개발 방식을 채용한다. 이런 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 라이프사이클은 컴포넌트가 생성되고, 업데이트되며, 소멸될 때의 상태를 설명하는 메서드이다. 이 메서드들은 컴포넌트가 라이프사이클을 따라서 동작할 수 있도록 도와주는 역할을 수행한다. 라이프사이클 메서드 이해 라이프사이클 메서드의 종류는 크게 3가지 종류로 나눌 수 있다. 마운트 마운트는 컴포넌트가 페이지에 새로 추가될 때 발생하는 단계이다. 이 단계에서는 다음과 같은 메서드가 호출된다. constructor : 컴포넌트가 생성될 때 호출 getDerivedSt..
웹 애플리케이션을 만들 때 종종 반복되는 코드를 작성하는 경우가 생긴다. 아래 코드를 보자 // src/IterationSample.tsx function IterationSample() { return ( 눈사람 얼음 눈 바람 ); } export default IterationSample; 위 코드에서 특정 형태가 반복되는 모습을 확인할 수 있다. 현재는 간단한 코드이지만, 더욱 큰 프로젝트에서 더 복잡해진 코드를 봐야한다면, 반복적인 내용을 효율적으로 관리하는 방법이 있어야 한다. map() map함수를 사용해 반복되는 컴포넌트를 렌더링할 수 있다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 문법 arr.map..
일반적인 HTML의 DOM 요소 네이밍은 id를 사용한다 특정 DOM 요소에 어떤 작업을 해야할 때 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아 작업할 수 있다. 리액트에도 public/index.html 파일에 id가 root인 요소가 있다. 리액트에서는 ref 개념을 통해 프로젝트 내부에서 DOM에 이름을 달 수 있다. ref를 사용하는 경우 ref는 DOM을 반드시 직접적으로 건드려야 할 때 사용한다. 리액트에서는 DOM에 접근하지 않아도 state를 통해 구현할 수 있기 때문이다. 입력값을 검증하는 컴포넌트를 예시로 만들어보자. // src/ValidationSample.css .success { background-color:..
사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 이벤트라고 한다. HTML을 통해 주로 설정되지만 리액트에서도 작성할 수 있다. 리액트 이벤트 시스템 리액트의 이벤트 시스템은 HTML로 작성한 이벤트와 인터페이스가 동일하므로 사용법이 비슷하다. 따라서 HTML에서 작성하던 것처럼 작성하되 몇가지 주의해야할 사항이 있다. 이벤트 이름은 카멜 표기법으로 작성한다. HTML : [onclick. onkeyup] react : [onClick, onKeyUp] 이벤트에는 자바스크립트 코드 전달이 아닌 함수 형태의 값을 전달한다. 함수 형태의 값은 여러가지 형식이 허용된다. DOM 요소에만 이벤트를 적용할 수 있다. 즉, div, button, input, form, span 등의 DOM 요소에만 이..
애플리케이션 프로젝트를 만들 때, 여러가지 컴포넌트들을 사용해 하나의 화면으로 만들게 된다. 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 선언할 수 있다. 클래스형 컴포넌트 가장 처음 리액트 프로젝트를 생성했을 때 나오는 기본적인 App 컴포넌트는 함수형 컴포넌트이다. import React from "react"; import "./App.css"; import { Fragment } from "react"; function App() { const name: string = "Users"; r..
