반응형 Framework/React14 conditional rendering 어떠한 조건에 따라서 렌더링이 달라질 때 자주 쓰이기 때문에사용 방법과 원리에 대해서 잘 이해하고 넘어가야한다. truthy falsy boolean 자료형 true / false true는 아니지만 true로 여겨지는 값: truthy {} : empty object [] : empty array number : not zero "0", "false" : String, not empty false는 아니지만 false로 여겨지는 값 : falsy false 0, -0 : zero, minus zero '', "", `` : empty string null undefined NaN Element Variables (엘리먼트 변수) 렌더링 해야할 컴포넌트를 변수처럼 다루고 싶을 때 사용한다. import .. 2022. 10. 11. 리액트에서 setState는 비동기로 동작 ?? setState는 비동기로 동작하는 것을 간과하지 못한 채 코드를 짜게 되면서 깊은 늪에 빠지게 됐다. 이 실수는 초보자라면 당연히 맞닿을 수 있는 일인데 해결 방법을 누가 딱딱 알려주면 얼마나 좋을까!!! 하여튼.. 깊게 공부하지 않았던 나의 미스텤... 이러한 실수를 범하고 있는 꽤 많은(?) 아니 초급자.. 분들께 좋은 피드가 됐으면 좋겠다... 🌻state state는 상태 변화값을 보여준다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내보내는것이 아닌 해당 컴포넌트 내부에서 데이터를 전달한다. 함수 내부에서 선언되어 사용되는 변수 처럼 컴포넌트 내부에서 사용이 가능하다. state는 변경 가능한 자바스크립트 객체이며 state의 상태가 변하면 re-randering된다. ex) 검색 창에 글을 .. 2022. 10. 3. 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. 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. 이전 1 2 3 4 다음 728x90 반응형
