본문 바로가기

분류 전체보기402

050. React - 페이지 라우팅 - 라우팅 설정 사용할 라이브러리가장 많이 사용하는 라우팅 라이브러리인 react-routing-dom을 이용하여 실습한다.설치 방법npm install react-router-dom의존성과 마찬가지로 프로젝트마다 세팅해주는 것.import하기// main.jsximport { BrowserRouter } from "react-router-dom";// 컴포넌트의 부모 컴포넌트로 감싸기 만들 페이지(컴포넌트) 구상하기만약 메인(홈)을 포함해서 3개의 페이지를 만든다면, "/" : Home.jsx"/Diary" : Diary.jsx"/Detail" : Detail.jsx위와 같이 src 폴더 내에 pages 폴더를 만들고 컴포넌트들을 만들어 준다.그리고 App.jsx 컴포넌트 내에 모두 import 해준다.imp.. Programing/React 2024. 5. 23.
049. React - 페이지 라우팅 - 소개 page-routing의 개념Single Page Application을 만드는 React.js는 정말로 하나의 페이지만 갖고 있는 것이 아니라 여러 html을 작성하더라도 마치 하나로 합쳐진 듯 보여주는 사용성을 보여주는 라이브러리일 뿐이고 실제로는 하나의 웹 사이트나 애플리케이션에 여러 개의 페이지가 존재한다.이 페이지들을 html의 태그처럼 하나로 이어주는 역할을 page-routing이라 한다.server는 웹 사이트를 구성하는 여러 개의 html 페이지를 갖고 있다가 서버 사이드 렌더링 방식으로 사용자가 요청한 페이지를 띄워준다.서버 사이드 렌더링은 서버에서 자바스크립트 등 웹 페이지를 구성하는 모든 요소를 직접 렌더링 한 뒤 사용자에게 화면을 넘겨주는 방식이고, 반대 방식으로는 클라이언트 사.. Programing/React 2024. 5. 22.
040. React 입문 - useRef로 컴포넌트의 변수 생성하기 개념useState와 useRef는 컴포넌트 내부에서 변수처럼 사용한다는 점은 동일하지만 useRef는 값이 변하더라도 컴포넌트를 재 렌더링 하지 않는다는 점이 큰 차이다.그리고 useRef는 DOM 요소를 직접적으로 선택이 가능하다. 마치 자바스크립트에서 querySelector를 사용한 것과 비슷하다.사용법import 하기import { useState } from "react";import { useRef } from "react";그런데 보통 useState는 무조건 사용할 테니, 출처가 같은 hook은 서로 중괄호 하나로 묶을 수 있다.import { useState, useRef } from "react";초기값 지정하기const refObj = useRef(0);console.log(refO.. Programing/React 2024. 5. 22.
React.js에서의 이벤트 핸들러 이벤트 핸들러란?웹 페이지 내에서 마우스를 클릭하거나, 스크롤을 올리고 내리거나, 키보드를 누르는 등의 이벤트가 발생했을 때 함수를 실행되는 함수를 말한다.import React from 'react';function App() { // 이벤트 핸들러 함수 정의 function handleClick() { alert('버튼이 클릭되었습니다!'); } return ( {/* 버튼에 onClick 이벤트 핸들러 설정 */} 클릭하세요 );}export default App;위와 같이 버튼 태그에 {} 중괄호로 함수를 바인딩하여 호출할 수 있다.React에서 자주 사용되는 이벤트 핸들러onClick (버튼)특정 요소가 클릭되었을 때 동작하는 함수.function .. Programing/React 2024. 5. 22.
037. React 입문 - State와 Props 개념state는 계속해서 바뀌는 값을 저장해두는 변수를 말하고, 각각 상태 변경 함수를 둘 수 있다.그리고 리액트는 반복되는 UI는 컴포넌트로 분리해서 별도의 파일에서 작성이 가능하다. 그리고 이러한 형태로 메인 컴포넌트에서 import하여 사용 가능하다.그런데 부모 컴포넌트의 state가 변경되면 부모 컴포넌트는 재 렌더링이 되면서 부모 컴포넌트에 정의된 모든 state를 다시 초기화 하는 현상이 발생한다.// App.jsxconst [users, setUsers] = useState(['장원영', '안유진']);const [count, setCount] = useState(0);만약 위와 같이 App 컴포넌트에 state가 여러개 정의 되어 있을 때 이름만 보더라도 users 상태와 count 상태.. Programing/React 2024. 5. 22.

티스토리툴바