본문 바로가기

Programing371

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.
2024-05-22 [React] state를 이용하여 화면에 렌더링 되는 배열 필터링하기 import { useState } from "react";function App() { const initialStudents = [ { name: "Alice", age: 17, grade: "A" }, { name: "Bob", age: 18, grade: "B" }, { name: "Charlie", age: 16, grade: "C" }, { name: "Diana", age: 19, grade: "D" }, { name: "Elmo", age: 20, grade: "E" }, { name: "Fiona", age: 21, grade: "F" }, { name: "Gabe", age: 22, grade: "A" }, { name: "Hannah", a.. Programing/TIL 2024. 5. 21.

티스토리툴바