반응형 분류 전체보기144 리액트에서 이벤트 다루는 방법 이벤트 핸들러 바인딩이란? 컴포넌트(Component)와 이벤트 함수를 연결(bind)하는 것이다. 바인딩하지 않아도 이벤트 함수는 실행이 되지만, 누가(어떤 컴포넌트가) 호출을 했는지 알 수 없다. 바인딩하지 않았는데, 이벤트 함수에서 this.state 또는 this.props를 사용할 경우 undefined로 처리된다. 1. 자바스크립트 함수는 객체이다. const App = () => { const nav = useNavigate() const goTo = () => { nav('ex-router') } const goToWrapper = () => { goTo() } return ( 가자!! ); }; 이벤트 코드를 그대로 전달하는 것이 아닌 함수의 형태로 객체를 전달한다. const App =.. 2022. 10. 4. 리액트에서 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. 실행 컨텍스트 * 해당 글은 코어자바스크립트 책을 기준으로 정리했습니다. 실행 컨텍스트 (Execution Context) 함수를 실행할 때 필요한 (실행할 코드에 제공할) 환경 정보를 모아놓은 객체 [객체 안의 구성] Variable Environment : 최초에는 식별자 정보를 들고 있지만 그 값이 계속 변하지 않는다. Lexical Environment : 실행 컨텍스트의 실행 내용에 따라 변수 값이 바뀔 때 그 변경 사항을 계속 트랙킹하는 정보이다. environmentRecord : 현재 문맥의 식별자 (hoisting) = 호이스팅이라는 개념과 일치한다. outerEnvironmentReference : 외부 식별자 (scope chain) = 외부 식별자 참조에 의해서 스코프체인이라는 개념이 생겼다. t.. 2022. 9. 29. 이전 1 ··· 28 29 30 31 32 33 34 ··· 36 다음 728x90 반응형
