라우팅이란? 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트를 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템 입니다. 👉 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글페이지 애플리케이션(SPA)를 만들 수 있습니다. SPA는 이름 그대로 페이지 하나로 돌아가는 애플리케이션이기 때문에 페이지 이동시 버벅임 없이 부드럽게 전환되지만, 웹 페이지 정보가 없기 때문에 SEO에는 매우 취약합니다. 허나 이는 HTML meta태그에 정보를 올리면 되어서 크게 걱정할 정도는 아닙니다. 최근에는 이런..

리액트에서 컴포넌트를 스타일링 할 때는 다양한 방식을 사용할 수 있습니다. 회사마다 요구하는 방식이 다르고 개발자마다 각자 취향에 따라 선택해서 사용할 수 있습니다. 자주 사용되는 스타일링 방식 일반 CSS : 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줍니다. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 입니다. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줍니다. 🔮 리액..

Hook 리액트 버전 16.8에 새로 도입된 기능 입니다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 합니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수 입니다. ⭐️ useState useState()는 리액트에서 상태(state)를 관리하기 위해 제공되는 hook 입니다. useState()를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있으며, 상태가 변경될 때마다 컴포넌트가 자동으로 다시 렌더링 됩니다. useState()는 배열 형태로 변환되며, 첫 번째 요소는 '현재 상태'이고, 두 번째..

리액트에서 배열과 맵은 컴포넌트 렌더링에서 매우 중요한 역할을 합니다. 배열은 순서가 '있는' 데이터의 집합으로, 각 요소는 인덱스를 가지고 있습니다. 맵은 key와 value를 가지는 구조로, key와 value 쌍으로 이루어져 있으며 key는 중복되지 않는 고유한 값 입니다. 고정 배열 렌더링 🙁 비효율 적인 방법 : 배열 그대로 작성하는 방법 import React from 'react'; const ArrayTest = () => { const users = [ { id: 100, userName: 'Karly', eMail: 'king@naver.com' }, { id: 200, userName: 'Elastine', eMail: 'hoho@gmail.com' }, { id: 300, userN..

Ref 참조(reference)의 줄임말로, React에서 DOM 요소나 클래스 컴포넌트 인스턴스에 대한 직접적인 참조를 생성하고, 저장하는 데 사용되는 객체 입니다. 사용 목적 DOM 요소에 대한 참조 👉 Ref를 사용하여 DOM 요소를 직접 조작할 수 있습니다. 이를 통해 포커스 설정, 텍스트 선택, 애니메이션 등을 구현할 때 유용합니다. 리액트 컴포넌트에서 id를 사용하면 안되는 이유!!! 👉 리액트 컴포넌트 안에서도 id를 사용할 수는 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달 됩니다. 하지만 특수한 경우가 아니면 사용을 권장하지 않습니다. 하나의 컴포넌트를 여러 번 호출하는 경우 유일해야 할 id가 중복 id로 만들어지게 됩니다. useRef Reac..

리액트에서 이벤트 핸들링은 HTML과 '비슷'하게 처리됩니다. 이벤트 핸들러는 JSX 요소의 props로 전달되며, 함수 형태로 작성 됩니다. 이벤트 핸들러 함수 정의 이벤트 핸들러 함수를 이벤트에 연결 이벤트 핸들러 함수에서 상태 업데이트 import React, {useState} from "react"; const EventHandler = () => { const [message,setMessage] = useState("안녕하세요."); // 값이 아닌 주소를 가지고 상태가 변했는지 판단함. const changeMessage= (e) => { setMessage(e.target.value); } return ( 이벤트 연습 입력 받은 메시지 : {message} ); } export defau..

들어가기 전에 ... 👉 리액트 16.8 이전 버전에서는 함수 컴포넌트에서 state를 사용할 수 없었습니다. 하지만 16.8 부터는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 사용법은 클래스 컴포넌트와 조금 다른데요. 이 과정에서 Hook을 사용합니다. ⭐️ 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 도와주는 ES6 문법 중 하나 입니다. // 예제 1.(객체 리터럴) const person = { name: '홍길동', age: 30, address: '서울시 강남구', email: 'honggildong@naver.com' } const { name, age } = person; // 예제 2. (배열) const col..

컴포넌트? UI를 구성하는 독립적인 모듈 입니다. 재사용이 가능하며, 각 컴포넌트는 자체적인 UI와 상태(state)를 가집니다. props와 state를 가집니다. 대문자로 시작하고, return문에는 UI요소를 작성합니다. (React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리 함) props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 state : 컴포넌트 자체에서 관리하는 데이터, state가 변경되면 컴포넌트는 다시 렌더링 됨.(⭐️hook) 컴포넌트는 함수형 컴포넌트와 클래스 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트는 함수를 사용하여 UI를 구성하는 컴포넌트입니다. 클래스형 컴포넌트보다 간단하게 작성할 수 있으며, 최근에는 함수형 컴포넌트를 사용하는 것이 추세입니다. 그..

JSX ? JSX (JavaScript XML)은 JavaScript 언어의 확장으로, 개발자들이 JavaScript 코드 내에서 HTML과 유사한 구문을 작성할 수 있도록 합니다. 이는 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리인 React에서 널리 사용됩니다. JSX를 사용하면 HTML처럼 보이지만 실제로는 JavaScript와 HTML의 혼합물인 코드를 작성할 수 있습니다. JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX는 하나의 파일에 자바스크립트와 ..

무언가를 배울 때는, 그것이 어디서 왔는지 파악하는 것이 중요하다. - GiangStepDEV Why React? 안정화 된지 얼마 안 된 리액트, 왜 이렇게 핫할까요? 모든 기술 트렌드는 그것이 나오게 된 배경을 거슬러 올라가면 알 수 있습니다. 한 때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청난 활약을 하고 있습니다. 복잡하고 거대한 애플리케이션을 만들기 위해서는 자바스크립트만으로 관리하기에는 복잡도가 매우 증가합니다. 이를 해결하기 위해 수많은 프레임워크가 등장하였으며, 이 프레임워크들은 주로..