반응형 분류 전체보기130 React TodoList 만들기 * style 컴포넌트: tailwindcss Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 🔷[App.js] //App.js function App() { const [value, setValue] = useState('') const [todoData, setTodoData] = useState([]) const handleSubmit = (e) => { e.preventDefault() // 새로운 할 일 데이터 const newTodo = { id: Date.now(), //현재 date값 titl.. 2022. 10. 3. 실행 컨텍스트 * 해당 글은 코어자바스크립트 책을 기준으로 정리했습니다. 실행 컨텍스트 (Execution Context) 함수를 실행할 때 필요한 (실행할 코드에 제공할) 환경 정보를 모아놓은 객체 [객체 안의 구성] Variable Environment : 최초에는 식별자 정보를 들고 있지만 그 값이 계속 변하지 않는다. Lexical Environment : 실행 컨텍스트의 실행 내용에 따라 변수 값이 바뀔 때 그 변경 사항을 계속 트랙킹하는 정보이다. environmentRecord : 현재 문맥의 식별자 (hoisting) = 호이스팅이라는 개념과 일치한다. outerEnvironmentReference : 외부 식별자 (scope chain) = 외부 식별자 참조에 의해서 스코프체인이라는 개념이 생겼다. t.. 2022. 9. 29. 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. 이전 1 ··· 25 26 27 28 29 30 31 ··· 33 다음 728x90 반응형
