React (32) 썸네일형 리스트형 Hooks : useState, useEffect, useReducer, useRef, useMemo, useCallback 1. Hooks란 무엇인가? Hooks는 리엑트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 2. useState 함수 컴포넌트에서 상태 관리를 위한 훅입니다 하나의 상태 값만 관리할 수 있으므로 관리해야 할 상태가 여러개라면 useState를 여러번 사용하면 됩니다. import {useState} from 'react' const [value, setValue] = useState(0) // value: 값 // setValue: 값의 상태를 변경하고 리렌더링됩니다. // useState(): 괄호 안에 기본 값을 넣어줍니다. 3. useEffect 리엑트 컴포넌트가 렌더링될 때마다 작업을 생명 주기(Lifecycle)와 의존성 배열.. 컴포넌트 반복 1. 컴포넌트의 반복 이란? 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. import React from "react"; function App() { return ( 눈사람 얼음 바람 ) } export default App; 코드에서 다음 형태가 계속 반복되는 것을 볼 수 있습니다. ... 지금은 li 태그 하나뿐이라 그렇게 문제가 되지는 않을 것 같습니다. 하지만 코드가 좀 더 복잡하다면 어떨까요? 코드양은 더더욱 늘어날 것이며, 파일 용량도 쓸데없이 증가하겠죠.이는 낭비입니다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대로 관리하지 못합니다. 2. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 .. 컴포넌트 스타일링 1️⃣ 일반 CSS : 특징: 전역 범위 일반 CSS는 전역 범위를 가지고 있어서, 스타일이 다른 요소들에 영향을 줄 수 있습니다. 클래스명을 잘 관리하지 않으면 충돌이 발생할 수 있어 유지보수가 어려울 수 있어요. 1) 이름 짓는 규칙 BEM (Block Element Modifier): 요소를 논리적인 블록, 요소, 수정자로 분류하여 클래스 이름 작성. 작명 규칙 지키기: 명확하고 일관된 클래스 네이밍으로 유지보수와 확장성 향상. 장점: 직관성: 기본 CSS 문법으로 쉽게 이해하고 적용할 수 있음. 유연성: 모든 브라우저에서 지원되며, 프로젝트 규모에 상관없이 사용 가능. 성능: 별도의 전처리 과정 없이 브라우저에서 직접 해석되어 로딩 시간이 짧을 수 있음. 단점: 전역 범위: 스타일 충돌 가능성이 .. Thunk 기본 세팅_setTimeout 3초(+ / -) https://github.com/webcreastory/react-lesson3-thunk.git GitHub - webcreastory/react-lesson3-thunk Contribute to webcreastory/react-lesson3-thunk development by creating an account on GitHub. github.com [axios&api] http://localhost:3000/ & http://localhost:4000/ 깃헙 주소 : https://github.com/webcreastory/react-axios-lesson3.git // src > axios폴더 > api.js import axios from "axios"; const instance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, // timeout: 1, // 0.001초 // 1000, // 1초 }); instance.interceptors.request.use( // 요청을 보내기 전 수행되는 함수 function(config){ console.log('인터셉터 요청 성공!'); return config; }, // 오류 요청을 보내기 전 수행되는 함수 function(error){ c.. 이벤트 핸들링(Event Handling) ✅ 1. 이벤트 핸들링(Event Handling)이란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다.예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행, 클릭했을 때는 onclick 이벤틀를 실행, Form 요소는 값일 바뀔 때 onchange 이벤트를 실행합니다.리액트에서의 이벤트 시스템은 이러한 HTML에서 DOM요소에 이벤트를 설정하는 방법과 매우 유사합니다.그럼 한번 살펴 봅시다. ✅ 2. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다.아래에서 살펴 봅시다. import React, { useState } from "react"; fun.. ref : DOM에 이름 달기 ✅. ref? 리엑트 프로젝트 내에서 DOM 요소에 직접 이름을 지정할 수 있습니다. HTML id와 유사하지만 재사용되는 컴포넌트 안에서 유일해야하는 id를 중복해서 가진 DOM이 생겨 문제가 될 수 있습니다. ✅. ref 사용 상황 DOM을 꼭 직접적으로 조작해야 할 때 사용됩니다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ✅3. ref 사용 방법 콜백 함수, createRef 두 가지 방법이 있습니다. ✅ 3.1. 콜백 함수를 통한 ref 설정 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달합니다. this.input=ref}/> this.input은 input 요소의 DOM을 가리킨다. this.input의 input name은 자유.. 컴포넌트 분리's 정석 //App.jsx import React from 'react'; import Modal from './components/modal'; import Button from './components/button'; import Input from './components/input'; import Select from './components/select'; function App() { return ( ); } export default App; // Button.jsx import React from 'react'; import { StButton1, StButton2, StButton3, StButton4 } from './styled'; function Button() { }; return ( Bu.. React : Button Modal Input Select 기본기능 구현 // App.jsx import React from 'react' import Button from 'conponents/Button'; function App() { return ( ) } export default App; // Button.jsx import React, { useState, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; import Select from './Select'; function Button() { // Button 영역 const btnClick = () => { alert('버튼을 만들어보세요'); }; const btnI.. 컴포넌트 (Component) function Child(props){ console.log(props) // 이게 바로 props다. return 연결 성공 } 1️⃣ 3.1 클래스형 컴포넌트 리액트 컴포넌트를 표현하는 두 가지 방법 ✅함수형 컴포넌트( 공식 홈페이지에서는 함수형 컴포넌트 사용 권장) // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } ✅클래스형 컴포넌트 class Welcome extends React.Component { render() { retur.. 이전 1 2 3 4 다음
