프론트엔드/React11 [형을 위한 리액트] 2. JSX 형을 위해서 썼지만 정작 형은 안 보는 형을 위한 리액트1. JSX의 원리JavaScriptXML로 자바스크립트를 HTML 처럼 작성할 수 있게 해주는 문법임. 자바스크립트의 확장 문법.Bebel과 같은 트랜스파일러가 리액트가 실행될 때 JSX문법을 React.createElement() 함수를 실행시켜 변환시켜줌.코드 예를 보면,아래와 같이 하나의 컴포넌트가 jsx를 반환하는 코드를 작성하면,return ( Hello, world! This is a paragraph. );바벨이 아래와 같이 코드를 변환시켜줌. createElement를 실행하면 가상돔을 구성하는 구성요소.import { jsx as _jsx } from 'react/jsx-runtime';_jsx( 'div', {.. 2024. 10. 15. [형을 위한 리액트] 1. 리액트를 왜 쓰는지 리액트는 자바스크립트로 동적인 ui를 쉽게 제작할 수 있도록 해주는 라이브러리가장 흔한 특징은 버츄얼돔으로 최적화 업데이트, spa(으)로 새로고침없이 동적인 ui를 보여줌 컴포넌트 기반 아키텍처, 단방향 데이터 흐름, jsx 활용문법등 이런걸 알아보기전 간단한 사용법으로 편리함을 보고감1. 기존의 작성 방법의 변화일단 이런 투두리스트에서 투두를 하나씩 추가할 때 자바스크립트를 사용함. 바닐라 자바스크립트 공통 html To-Do List Add Task 자바스크립트로 작성하는 방법에는 두 가지 방식이 있음.하나는 돔을 만들어서 돔을 추가하는 방식.//돔 기반 버전document.addEventListener('DOMContentLoade.. 2024. 10. 7. setState 함수는 Dependency list에 넣어줘야 할까? setState 함수는 Dependency list에 넣어줘야 할까? useEffect나 useCallback, useMemo 등 각 훅들에 Dependency list에 set함수를 넣어줘야 하는지 갑자기 궁금해짐. NextJS로 진행하면 아래 두 개의 코드처럼 사용해도 린트가 경고를 안 해준다. 그래서 찾아봤더니 const fn = useCallback(() => { setState(true); }, [setState]); const fn = useCallback(() => { setState(true); }, []); 공식문서의 대답 리액트 구버전 공식문서에서 setState는 함수 식별자 ID가 안전하고 리렌더링 되어도 변하지 않는다고 한다. https://legacy.reactjs.org/doc.. 2024. 1. 17. 상태(state) 업데이트의 비밀(batch)🤫 상태를 업데이트해서 일어나는 과정과 비밀을 알아보겠습니다. 리액트가 렌더링 된 컴포넌트를 언제 업데이트를 시키나요? 다들 아시다시피 바로 상태가 업데이트 됐을 때입니다. import { useState } from 'react'; function App() { const [num, setNum] = useState(0); const onClick = () => { setNum(num + 1); }; return ( {num} 클릭 하면 1이 증가 ); } export default App; 보시다시피 클릭하면 +1이 된 값이 화면에 나타납니다. 너무 당연하죠? 하지만 아래와 같이 setNum(num+1)이 여러 개인 경우에는 어떻게 될까요? 5가 될까요? import { useState } from 'r.. 2023. 6. 12. 이전 1 2 3 다음
