상태변경 함수 호출로 인한 무한루프 export default function Products() { const [products, setProducts] = useState([]); fetch('data/products.json') .then((res) => res.json()) .then((data) => { console.log('데이터 받아옴'); setProducts(data); }); return ( ... ); } 함수 컴포넌트 내부에서 상태변경 함수를 호출하면 state 의 값이 변경됨 state 가 변경되면 리액트는 상태가 변경된 컴포넌트 함수를 다시 호출함 내부에서 상태변경 함수를 다시 호출함 무한 루프에 빠짐 이때 필요한 것이 useEffect useEffect(() => { // 코..

export default function Counter() { const [count, setCount] = useState(0); return ( {count} { setCount(count + 1); setCount(count + 1); setCount(count + 1); }} > Add + ); } 버튼 클릭 시 1이 출력됨 onClick 이 호출되었을 때 전달되는 콜백 함수는 현재 상태를 기억함 내부에서 사용하는 count 변수의 현재 값은 0이므로 이 값을 계속 기억하게 됨 (자바스크립트 클로저) function useState(initialState: S | (() => S)): [S, Dispatch]; type SetStateAction = S | ((prevState: S) => S..

function App() { const handleClick = (event) => { console.log(event); alert('click!'); }; return ( 버튼 ); } export default App; 태그 안에 이벤트 속성 작성 onClick, onSubmit, onChange ... 속성 값으로 자바스크립트 함수를 작성해 이벤트를 연결함 이벤트 발생 시 SyntheticBaseEvent 객체가 리스너에 전달됨 리액트가 한 단계 감싼 이벤트 객체 자바스크립트로 처리하는 이벤트와 동일한 데이터들이 들어있음 참고 https://reactjs.org/docs/handling-events.html Handling Events – React A JavaScript library for ..

import './App.css'; function App() { const name = 'autumn'; const list = ['딸기', '바나나', '오렌지']; return ( {`Hello! ${name}`} {name} {list.map((item) => ( {item} ))} ); } export default App; 컴포넌트는 함수로 만들 수 있음 함수 이름은 대문자로 시작해야 함 리턴문에 JSX 를 사용해야 함 하나의 태그로 묶어서 반환해야 함 Fragment 인 사용 가능 class 대신 className 을 사용해야 함 자바스크립트 코드 사용 시 중괄호로 묶어 주어야 함

Create React App 리액트 개발에 사용되는 툴 설치와 기본 설정들을 한 번에 할 수 있음 babel, webpack ... 작업 폴더 안에서 명령어 실행 1분정도 소요됨 npm npm init react-app [프로젝트명] npx npx create-react-app [프로젝트명] yarn yarn create react-app [프로젝트명] yarn start 개발용 모드로 프로젝트 실행 yarn build 배포 시 빌드할 때 사용 yarn test 작성한 유닛테스트, 테스트코드 실행 yarn eject 숨겨진 툴/설정 값들을 밖으로 빼냄 다시 되돌릴 수 없기 때문에 정말 필요한 경우에만 사용 프로젝트 구조 .yarn yarn 실행에 필요한 파일들 node_modules npm 을 이용해 ..

리액트 UI 를 만들기 위한 JavaScript 라이브러리 UI 를 컴포넌트 단위로 보여주고 이벤트에 반응하도록 만들어짐 리액트 === 컴포넌트들 컴포넌트 다른 컴포넌트들과 독립적인 응집도가 높은 UI 블럭 독립적이어야 함 고립되어 있어야 함 재사용성이 높아야 함 컴포넌트 나누는 기준 재사용성 반복되는 것을 컴포넌트로 만들어서 재사용성을 높임 단일책임 한 컴포넌트 안에서 너무 다양한 로직을 처리하는 경우 재사용될 가능성이 낮더라도 작은 단위로 나눔 리액트 동작 원리 컴포넌트 정의 함수로 정의함 함수의 반환 값은 UI 에 표기할 html 처럼 생긴 JSX 로 만듦 render JSX 문법을 사용해 컴포넌트를 만들 수 있음 상태가 변경될 때 마다 re-render 됨 실제로 변경된 부분만 화면에 업데이트 됨..