본문 바로가기

리액트

 (5)
react 의 원리 문제 :리엑트는 어떻게 작동할까? 왜 좋을까? 알아야할 단어 변화 (Mutation) Model Virtual Dom 브라우저 랜더링 과정 상황 1. 웹 어플리케이션의 렌더 엔진이 HTML을 파싱하여 DOM tree 생성 2.render tree 생성 css파일과 inline 스타일을 파싱 => DOM tree+ CSS 3. Layout 각 노드들의 스크린의 자표에 따라 위치 결정(어디에 태그를 넣을건지를 지정) 4. Paint. 실제 웹 화면에 그리기 문제 : 태그의 속성이 바뀌거나 데이터가 변경이 되면 이 과정을 계속 바뀌게 된다. 이러한 연산을 한다는 거는 메모리 누수, 과부화 발생 인터랙션에 의해 DOM에 변화가 발생하면?? 데이터의 글자가 바뀐다, 숫자가 변화한다 등 등.. 이면 이 과정을 반복..
react 새로운 tweet 추가 방법 공부 문제 react를 이용해서 새로운 tweet {} 객체가 추가 되었을 때 usestate를 이용하여 기존 배열에 넣는 방법 기존코드 const [userName,setUserName]=useState('') const [message, setMessage]=useState('') const handleChangeMsg = (event) => { // TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요. setMessage(event.target.value) }; const handleChangeUser = (event) => { // TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요. setUserName(event.target.value..
useState #2 숫자 데이터 count하기 const Counter =() =>{ const [value, setValue]=useState(0) const increaseValue=()=>setValue(value+1) const decreaseValue=()=>setValue(value-1) return( 현재 카운터의 값은 {value} 입니다. {value} {value} ) } export default Counter;
useState 사용하여 데이터 추가 및 삭제하기 useState 사용하여 데이터 추가 및 삭제하기 import React,{useState} from 'react' const I= () =>{ const [names, setNames]=useState([ {id: 1, text: "snowman"}, {id: 2, text: "ice"}, {id: 3, text: "snow"}, {id: 4, text: "windy"} ]) const [inputText,setInputText]=useState('') const [nextId,setNextId]=useState(5) {/*1.input에 데이터를 넣었을 때 text가 추가되어야 한다. */ } const onChange= (e)=>setInputText(e.target.value) {/*2.추가 버튼..
react 처음 시작할 때!! 참고 리액트 설치 npm init react-app npm create react-app (웹팩 바벨의 설치가 포함되어 있음) 리액트 rounte 설치 npm install react-router-dom 리액트 실행 해당 디렉토리로 들어가 npm start 리액트 아이콘 설치 npm install react-icons --save // npm yarn add react-icons // yarn 리액트 알아보기 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; JSX를 쓰는 이유 JSX 형태란 J..

티스토리툴바