본문 바로가기

부트캠프교육중/react80

이벤트처리 #DOM의 이벤트 처리방식과 유사하다. 몇가지 문법차이만있다. -react에서 이벤트는 소문자 대신 카멜 케이스를 사용한다. -JSX를 사용하여 문자열이 아닌 함수로 이벤트처리 함수(이벤트 핸들러)를 전달한다. HTML Event React Event input, textarea, select와 같은 폼엘리먼트는 컴포넌트의 state로 관리하고 업데이트한다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올수있다. onChange는 input의 텍스트가 바뀔때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱.. 2023. 1. 26.
state state: 컴포넌트내에서 변할수있는값 리액트에선 자주 바뀌는 중요한 데이터를 변수말고 state로 저장해서 써라!! state는 변경되면 HTML이 자동으로 재렌더링이 된다(HTML이 새로고침없이도 스무스하게 변경됨) #state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다. #useState를 이용하기 위해서는 react로부터 useState를 불러와야한다. import { useState } from "react"; import React, { useState } from "react"; #이후 useState를 컴포넌트 안에서 호출해준다. 호출해준다는건 state라는 변수를 선언하는 것과 같으며, 변수의 이름은 아무이름이나 상관없다. 일반적인 변수는 함수가 끝날때 사라지지만.. 2023. 1. 26.
Props #state (상태) -살면서 변할수있는값 -컴포넌트의 사용중 컴포넌트 내부에서 변할수있는값 (외부의 영향을 받지않고) -state는 컴포넌트내부에서 변화하는값, 외부의 영향을 받지않고 / 나이, 현재사는곳, 취업여부, 결혼연애여부 -props는 외부로부터 전달받은값 /이름, 성별 -컴포넌트의 속성(property)를 의미한다. 성별이나 이름처럼 변하지 않는 외부로부터 전달받은값으로, 웹애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. -부모 컴포넌트(상위컴포넌트)로부터 전달받은값이다. props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 react엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할수있.. 2023. 1. 26.
React Router(BrowserRouter, Routes, Route, Link) react router(react-router-dom) 라우팅에 따라 다른 뷰를 보여주기 위해서 react에서는 react router라는 라이브러리를 많이 사용한다. #라우팅(routing) -다른 주소에 따라 다른 뷰를 보여주는 과정 -경로에 따라 변경한다 라는 의미 -react spa에서는 라우팅을 위해 react router라는 라이브러리를 가장 많이 사용한다. #react router주요 컴포넌트 크게 세가지로 나뉜다. 라우터 역할을 하는 BrowserRouter 경로를 매칭해주는 Routes, Route 경로를 변경하는 역할을 하는 Link 이 컴포넌트들을 사용하기 위해서는 react router 라이브러리에서 따로 불러와야한다. import {BrowserRouter, Routes, Rout.. 2023. 1. 25.

티스토리툴바