본문 바로가기

전체 글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.
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.
2024-05-21 [React] state로 렌더링 되는 데이터 필터링하기 import { useState } from "react";function App() { const students = [ { 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", age: 23,.. Programing/TIL 2024. 5. 21.
2024-05-20 props 개념 이해하기 props 개념은 이해했으나 손에 잘 붙지 않아 연습문제를 풀고자 한다.Message라는 이름의 컴포넌트를 만들고, text라는 props를 받아서 화면에 출력하세요.App 컴포넌트에서 Message 컴포넌트를 사용하여 "Hello, World!" 메시지를 출력하세요.// App.jsxfunction App() { return ( );}// Message.jsxfunction Message(props) { return ( {props.test} );} Programing/TIL 2024. 5. 21.
008. [part1] 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 리액트에서 동적 UI 만드는 Step동적 UI란? 보였다 안 보였다, 뭘 누르면 보였다가 사라졌다 하거나 토글되는 UI를 말함.이런 UI를 리액트에서는 state로 UI의 상태를 나타내고 UI의 상태를 상태 변경 함수를 통해 바꿔주기만 하면 특정 조건에서 보이거나 보이지 않는 동적 UI를 만들 수 있음.HTML/CSS로 동적으로 보여질 UI를 미리 디자인한다.UI의 현재 상태를 state로 저장해두고state의 상태에 따라 UI가 보일지 말지 조건문으로 작성한다.const [modal, setModal] = useState(0);// modal창이 보였다가 안 보였다가 하게 하고 싶기 때문에 modal이라는 state를// 만들었고, 초기 상태를 숫자 0으로 설정하였음. 이것은 보이지 않는 상태라고// .. Programing/React 2024. 5. 21.
007. [코딩애플] [part1] Component 많은 div들을 한 단어로 줄이고 싶으면 컴포넌트란?리액트에서 반복되는 UI(쉽게 이야기해서 HTML영역, 물론 엄밀히 말하면 jsx 문법인 영역)을 따로 분리해서 하나의 함수로 만든 다음 간단하게 호출하는 방법을 이야기 한다.예를 들어 리액트 프로젝트를 처음 세팅하면 App.jsx에서 자바스크립트와 HTML(jsx)를 모두 여기서 작성하게 될 텐데 이것 또한 자세히 보면 function App() {}이 코드 블럭 안에 있는 하나의 컴포넌트이다.컴포넌트의 예시모달창을 HTML에서 만들었고 만약 이 태그가 복잡하고 길다면 하나의 컴포넌트로 분리해서 아래와 같이 메인 컴포넌트(보통 App.jsx)에서 호출만 해서 사용 가능하다.function App() { return ( 제목 날짜 상세내.. Programing/React 2024. 5. 21.

티스토리툴바