반응형 전체 글144 useEffect() useEffect() side effect를 수행하기 위한 Hook 리액트의 side effect는 효과, 영향을 말한다. 예를 들면 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업들을 말한다. 이러한 작업이 effect라 불리는 이유는 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문이다. 즉 렌더링이 끝난 이후에 실행되어야 하는 작업들이다. 이러한 작업이 side로 실행된다는 의미에서 side effect라 불린다. // import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from 'react'; function App() { const [count, setCo.. 2022. 9. 29. 리액트에서 key값이 필요한 이유 (에러문구) `Each child in an array should have a unique “key” prop.` 렌더링은 문제가 되지 않지만, 각 요소마다 고유의 key값을 생략하면 위의 에러문구가 뜨게된다. JSX Key 속성은 무엇인가? 요소의 리스트를 나열할 때는 key값이 필요하다. 키는 리액트가 변경, 추가 또는 제거된 항목을 식별하는데 도움을 준다. 요소에 안정적인 id를 부여하려면 배열 내부의 요소에 키를 제공해야한다. ex) map()함수로 배열을 나열할 때 각 요소별로 key값을 넣어준다. 가상 돔 -> 실제 돔에 적용 브라우저가 변화를 감지하고 DOM이 렌더링 될 때 virtualDOM 과 realDOM 을 비교하여 변화가 감지 된 부분만 업데이트 된 새로운 DOM을 연산한다. 최소.. 2022. 9. 28. class 컴포넌트에서 function 컴포넌트로 컴포넌트 자체를 바꾸기 class 컴포넌트 extends Component ~ 지우기 export default class App extends Component { ~ 🔽 export default function App() { ~ render함수 없이 바로 return() class 컴포넌트는 render()안에 return() 함수형 컴포넌트는 render()없이 바로 return() render() { return ( ...내용 ) } 🔽 return ( ...내용 ) [state바꾸기] useState Hook을 이용해서 표현하기 react에서 useState를 가져와서 사용한다. const [todoData, setTododata] = useState([]) useState의 인수 todoDa.. 2022. 9. 26. Webpack [모듈] 파일을 여러개로 분리해서 개발을 한다. 이렇게 분리된 파일을 모듈이라고 한다. 필요한 어떤 곳에서든 사용할 수 있기에 자주 사용하는 코드는 모듈로 만든다. 브라우저는 웹서버에 자원을 요청하고 준비된 자원을 응답함으로써 ui를 만들 수 있다. 개수가 많아지면 네트워크 자원의 증가는 페이지 로딩시간이 길어짐으로 사용자 경험에 좋지 않다. 개발 편의를 위해 모듈로 분리해서 개발을 하고 페이지 로딩을 줄일 수 있는 방법은 브라우저에서 서버로 요청하는 http요청을 줄이는 것이다. 모듈로 나눠서 개발로하고 이러한 모듈을 개발 전에 하나의 파일로 묶어서 배포를 하는것이다. 그만큼 서버로 요청하는 개수가 줄어들기때문에 사용자 경험을 향상시킬 수 있다. 이렇게 하나의 모듈로 묶는 작업을 번들링이라고 한다. 여.. 2022. 9. 20. 이전 1 ··· 29 30 31 32 33 34 35 36 다음 728x90 반응형
