본문 바로가기

분류 전체보기41

[React] react-router-dom 사용법 라우팅이란?? 라우팅은 네트워크에서 경로를 선택하는 프로세스 입니다. 즉 다양한 주소의 요청이 들어오면 각각 맞는 요청으로 이동시켜 주는 작업입니다! React-Router react-router-dom이란 React 애플리케이션에서 라우팅을 다루기 위한 인기 있는 라이브러리입니다. 이는 현재 URL을 기반으로 서로 다른 뷰 또는 컴포넌트 간에 이동할 수 있게 하는 선언적인 방식으로 라우팅을 정의하는 react-router 라이브러이의 일부입니다. 'react-route-dom'에서 제공하는 주요 컴포넌트는 다음 세가지가 있습니다. 1. BrowserRouter: 이 컴포넌트는 HTML5 히스토리 API를 사용해 UI를 URL과 동기화 시킵니다. 애플리케이션을 감싸서 컴포넌트를 사용해 선언적인 라우팅을 .. React 2023. 12. 31.
[React] onClick과 component onClick onClick={함수} 또는 onClick={ ()=>{실행 내용} }으로 사용할 수 있습니다.  위와 같이 작성하면 아래와 F12를 눌러 콘솔창을 보면 아래와 같이 5가 출려됩니다. 그리고 state를 사용하여 하트를 누르면 숫자가 올라가는 것을 구현해보면 다음과 같이 구현할 수 있습니다.이때 onClick에는 state의 하트변경 함수를 이용하여 하트+1을 해줍니다. 제목을 바꿔주고 싶으면 아래와 같이 글제목변경안에 바꾸자 하는 데이터를 넣어주면 됩니다. 만약 Array에서 하나의 데이터만 바꾸고 싶다면 아래와 같이 [...글제목]이라고 작성하여 deep copy를 해야한다.   Component위에 코드들은 HTML 태그들이 계속 생성되.. React 2023. 12. 29.
[React] JSX 문법 JSX 우선 App.js를 아래와 같이 수정하고, App.css에 body와 .hello를 추가한다. JSX에서는 으로 작성해야 한다. 그리고 npm run start를 하면 아래와 같이 나옵니다 아래와 같이 변수를 {}를 이용하여 사용 가능하 State 변수대신에 state를 사용해도 되는데 import React, {useState} from 'react'; 를 추가해줘야 합니다. 그러고 나서 아래와 같이 사용하면 됩니다! 글제목은 state 데이터, 글제목변경은 state의 데이터를 변경하는 함수입니다. 아래와 같이 Array로 넣어줄 수도 있습니다. Reference https://velog.io/@kiyoog02/React-%EA%B8%B0%EC%B4%88-2-JSX%EC%99%80-state-.. React 2023. 12. 28.
[React] React.js Fragments React에서 컴포넌트가 여러 Elemnet를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용 가능합니다. 아래 Table과 Columns 예시를 보겠습니다! class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이렇게 하면 Table의 출력결과는 아래와 같습니다! Hello World 결과를 살펴보면 안에 가 포함되어 있는 것을 볼 수 있는데 이것을 제거하기 위하여 아래와 같이 작성해줍니다. class Columns .. React 2023. 12. 27.
[React] React.js 시작 우선 아래 사이트에 들어가서 node js를 설치해주어야 한다 ! https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node js 버전 확인은 cmd창에서 아래와 같이 확인 가능하다. React 프로젝트 생성은 아래와 같이 npx create-react-app [프로젝트이름] 으로 생성 가능하다. npx create-react-app test-app index.js 우선 index.js를 살펴보면 React.StrictMode라는 것이 있는데 애플리케이션 내에서 잠재적인 문제를 알아내기 위한 도구로, Fragment와 같이 UI를 렌더링하지 않고, 자식.. React 2023. 12. 27.

티스토리툴바