본문 바로가기

프론트엔드관련 책예제실습정리

 (32)
08hooks/useMemo,useCallback,useRef 1.useMemo 렌더링 과정에서 특정값이 바뀌었을때만 연산을 실행 //average.js import React, { useState, useMemo } from "react"; const getAverage = (numbers) => { console.log("평균값계산"); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(""); const onChange = (e) => ..
컴포넌트 반복 map메서드를 활용한 li 반복 ///App.js import React, { Component } from "react"; import IterationSample from "./IterationSample"; class App extends Component { render() { return ; } } export default App; ///IterationSample.js import React from "react"; const IterationSample = () => { //return ( // // 눈사람 // 얼음 // 눈 // 바람 // //); const names = ["눈사람", "얼음", "눈", "바람"]; const nameList = names.map((name, inde..
ref:DOM에 이름달기 JSX안에서 id를 사용할 경우 같은 컴포넌트가 여러번 사용되었을때 문제가 생김 =>(대안)ref는 전역적 작동하지 않고 컴포넌트 내부에서만 작동 **ref 사용하는 이유 : 가끔 state로만 해결할 수 없는 기능들이 있다. (특정 input 포커스, 스크롤박스조작, canvas요소 그림그리기) **ref로 전달받은 컴포넌트 메서드는 부모 자식 구조일때만 사용 가능 (함수형 컴포넌트에서는 useRef라는 Hook함수를 사용: React.createRef와 유사) ////App.js import React from "react"; import Validation from "./ValidationSample"; const App = () => { return ; }; export default App; /..
이벤트핸들링2 3-1.이벤트핸들링익히기 -input 여러개 다루기 ///*** keypoint: input의 name 값 key로 가져오기 handleChage = (e) =>{ [e.target.name] : e.target.value //message:e.target.value //username:e.target.value } ///EventPractice.js import React, { Component } from "react"; class EventPractice extends Component { state = { username: "", message: "", }; handleChange = (e) => { this.setState({ [e.target.name]: e.target.value, }); }..
이벤트핸들링1 1.리액트의 이벤트시스템 -이벤트이름은 카멜표기법으로 작성 - 이벤트 실행시 js코드를 전달 x, 함수 형태 값을 전달 -DOM요소에만 이벤트 설정(컴포넌트에는 이벤트 설정x) ex) (x) 2.이벤트 종류 Clipboard,Composition,Keyboard,Focus,Form,Mouse,Selection,Touchm UI, Wheel, Media,Image,Animation.Transition 참고문헌:facebook.github.io/react/docs/events.html 3.이벤트 핸들링 익히기 -컴포넌트 생성, onChage 이벤트로 e.target.value 값 콘솔창에 찍기 //////App.js import React from "react"; import EventPractice fro..
컴포넌트2 -state 5.state state와 props의 차이 : state는 컴포넌트 내부에서 바뀔수 있는 값, props는 컴포넌트 사용과정에서 부모컴포넌트에서 설정하는값(읽기전용) 5-1.클래스형 컴포넌트 setState 사용 -constructor 의 this.state로 초깃값설정 > constructor 제거하고 초깃값 설정도 가능 -this.setState에 객체 대신 함수인자 전달하기, 함수에서 바로 객체 반환하기 -this.setState 함수 이후 콜백함수부르기(setSTate의 두번쨰 파라미터에 callback함수 등록) ///////////////App.js import React from "react"; import Counter from "./Counter"; const App = () => { ..
컴포넌트 1 -component,import, props(prototype) import React from "react"; const MyComponent = (props) => { return 안녕하세요 제 이름은 {props.name}입니다; }; // MyComponent.defaultProps = { // name: "기본이름", // }; export default MyComponent; 1.클래스형 컴포넌트 함수형컴포넌트 와의 차이점 : state, 라이프사이클 API기능, 임의 메서드 정의, render함수 필요 함수형컴포넌트 클래스형컴포넌트 장점 선언이 쉽다, 메모리가 적다, 배포시 파일 크기가 작다. state,라이프사이클api 사용가능, 임의메서드정의가능 단점 state,라이프사이클api 사용불가 >>16.8v 이후 HOOKS 등장 함수형컴포넌트에 비해 선언하..
JSX 문법 정리 1.import React from 'react'; import 구문으로 모듈 불러오기 : 프로젝트 생성과정에서 node_modules 생성 그중 react 모듈 불러오기 (비교: require /node js) 사실 모듈을 불러와 사용하는 것은 브라우저가 아닌 환경에서 사용할 수 있도록 node js에서 지원하는 기능, 이 떄문에 bundler(webpack, parcel,browserify ) 사용한다. 보통 웹팩의 loader를 많이 사용하나 create-react-app이 이 작업을 포함한다 2.JSX -사용이유 : 가독성이 편하다(공식적인 js 문법은 아니다.) *ReactDom.render : 컴포넌트를 페이지에 렌더링, react-dom 모듈을 불러와 사용 2-1. JSX문법 1)하나의 요소..

티스토리툴바