react

React Router 개념React에서 라우팅을 구현하기 위한 표준 라이브러리웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해준다.라우팅의 개념예를 들어:example.com/home → 서버의 home.html 파일 요청example.com/about → 서버의 about.html 파일 요청React와 같은 단일 페이지 애플리케이션(SPA)에서는 클라이언트 사이드 라우팅이 사용됩니다.웹 애플리케이션이 처음 로드될 때 필요한 모든 JavaScript를 다운로드URL이 변경되면 새로운 페이지를 서버에서 받아오는 대신, JavaScript가 브라우저의 히스토리 API를 사용하여 URL을 변경하고 화면에 표시되는 컴포넌트를 변경페이지 전체를 다시 로드하지 않기 때문에 더 빠른 ..

와이어프레임을 만들때부터와이어프레임을 만들때부터 기능 요약을 해야한다.ex) 사용자 입력 필드에 텍스트를 입력하면 상태에 저장됨⬇️컴포넌트 구현에 대한 설명도 하면 좋다.ex) 1. 상태관리사용자가 입력 필드에 텍스트를 입력할 때마다 상태가 업데이트 된다. 📝 유저에게 알림을 줄때는 alert()보단 모달 사용하기⬇️사용자 관점에서 동작 과정도 설명하면 좋다 📃 주요 코드 설명import React, { useState } from 'react'const InputFild = ({ setData }) => { const [inputText, setInputText] = useState('') // 태그들에 이벤트 넣고 함수로 만들어놓기 const inputItem = e => { // 한글..

1. 컴포넌트 단위로 나누기2. UI 구현컴포넌트에서 Controller.jsx랑 View.jsx를 만들어준다.const Viewer = () => { return ( 현재 카운트 0 );};export default Viewer;const Controller = () => { return ( -1 -10 -100 +100 +10 +1 );};export default Controller; 그뒤 App.jsx의 안에 입력해준다. import './App.css';import Controller from './components/Controller';import Viewer from './compon..

Event Handling이란 무엇일까?Event - 웹 내부에서 발생하는 사용자의 행동 (버튼 클릭, 메시지 입력, 스크롤 등등)Handling - 다루다, 취급하다, 처리하다=> 이벤트가 발생했을 때 그것을 처리하는 것 (웹에서 발생하는 사용자들의 행동을 처리하는 것) (버튼 클릭시 경고창 노출)각각의 버튼을 누르면 큰솔창에 메일, 카페, 블로그가 출력된다. 첫번째 방법onClick={() => { console.log(text); }} 위의 코드를 이벤트를 실질적으로 처리해서 이벤트 핸들러라고 부른다.  두번째 방법 - 변수로 지정해서 작성하기const Button = ({ children, text, color = 'black' }) => { const onClickButt..

Props로 데이터 전달하기Props란? 컴포넌트에 값 전달하기부모 컴포넌트가 자식 컴포넌트 들에게 마치 함수의 인수를 전달하듯 원하는 값을 전달해주는게 가능하다.이렇게 전달된 값을 props라고 한다.  props를 이용하면 좋은점props를 이용하면 컴포넌트를 마치 함수를 호출하듯이 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.전달받은  props의 값을 활용하는 방법props라는 매개변수에 객체 형태로 값이 저장되어있음으로 점 표기법을 사용해 props.text를 렌더링하도록 설정하면 버튼 안에 각각의 렌더링된다.  그렇다면 컬러의 값도 활용하려면 어떻게 해야할까? 버튼의 style을 color는 props의 color라고 설정해주면 된다. 버튼이 빨간색으로 렌더링된것을 확인할..

JSX로 UI 표현하기JSX란?확장된 자바스크립트 문법을 의미한다.이렇게 자바스크립트랑 HTML 코드를 혼용해서 작성가능하다.  ⚠️ JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣는다. - 자바스크립트 표현식? 삼항 연산자나 변수의 이름처럼 특정 값으로 평가    중괄호 안에 if문을 작성하면 오류 발생2. 숫자, 문자열, 배열 값만 랜더링const Main = () => { const number = 10; const obj = { a: 1 }; return ( main {/* js값을 html로 렌더링하고 싶으면 js코드에 중괄호를 작성해야된다. */} {/* 삼항 연산자도 사용이 가능하다 */} {number % 2 === 0 ? '..

실습 준비하기npm create vite@latest → 파일 명 입력 → React → JavaScript npm i → npm run dev → 로컬 호스트 주소 들어가기 불필요한 파일을 삭제해보자! public 폴더 - vite.svg 삭제src 폴더 - assets 폴더 - react.svg 삭제 App.jsx 파일 수정import './App.css';function App() { return ( Welcome to React );}export default App;App.css, index.css 작성된 스타일들 모두 삭제 main.jsx 파일 수정import { createRoot } from 'react-dom/client';import ..

📌 배운 내용 요약useState 훅을 사용해 상태(state)관리하기컴포넌트 분리: Header, InputFild, PostList로 구조 나눔버튼 클릭 이벤트로 상태를 변경하고 화면이 바뀌는 흐름props를 통해 자식 컴포넌트로 데이터 전달📃 주요 코드 설명import React, { useState } from 'react'import Header from '../components/Header'import './index.css'import InputField from '../components/InputFild'import PostList from '../components/PostList'export const App = () => { const [sample] = useState('t..

컴포넌트를 선언하는 방식1. 함수 컴포넌트import React from 'react';const TTest = () => { return ( );};export default TTest; 2. 클래스형 컴포넌트import React, { Component } from 'react';class TTest extends Component { render() { return ( ); }}export default TTest; render 함수가 꼭 있어야한다. → 그 안에 보여줘야할 JSX를 반환한다.  함수 컴포넌트와 클래스형 컴포넌트의 차..