[study]이론정리237 hooks 12. hooks1> 개요 이전에는 클래스에서만 사용할 수 있는 기능이 있었음. 따라서, 함수에서는 사용할 수 없었기 때문에 크래스 컴포넌트가 많이 사용되었음. React 16.8 이후부터는 클래스에서만 사용했던 기능을 함수에서도 사용할수 있도록 지원해줌. 2> 종류 - useState - useRef - useEffect - useContext - useMemo - useCallback ... 주의할점은 반드시 최상위 함수(컴포넌트)에서만 사용가능하다. 일반 함수, 반복문, 조건문등에서는 사용이 불가능하다. https://ko.react.dev/reference/react/useState useState – ReactThe library for web and native user interfacesko.. 2024. 7. 3. 배열반복(map함수) 11. 배열반복 import logo from './logo.svg'; import './App.css'; function App() { /////////////////////////////////////////////////////////////////// const userList = [{ username: "홍길동1", age: 20, address: "서울1" }, { username: "홍길동2", age: 50, address: "서울2" }, { username: "홍길동3", age: 60, address: "서울3" } ]; // js var result = userList.map(.. 2024. 7. 3. 이벤트처리 10. 이벤트 처리 1> 개요 - 이벤트 핸들러(이벤트함수)는 함수 컴포넌트안에서 정의함. ex> // 함수 컴포넌트 function App() { // 이벤트 함수 function go() {} return( // JSX ); } - JSX 에서 이벤트 처리는 카멜표기법(onClick, onChange, ...) 을 사용해야 된다. - 기본문법 2가지 가. 이벤트함수명 이용 onClick={이벤트함수명} ex> onClick={go} => 값을 넘길수가 없음. - 이벤트객체는 자동으로 전달됨. 나. arrow 함수 이용 onClick={arrow함.. 2024. 7. 3. Props 9. props 1> 용도 - 화면 레이아웃이 중첩된 형태로 되어있고 이때 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할때 사용하는 방법. (단방향) 2> 특징 - 단방향(부모에서 자식으로만 전달 가능) - 전달되는 데이터 종류 제한이 없음. - 필수가 아닌 옵션 3> 문법 가. 속성(proerty)이용 ex> function Child(파라미터) { return ( ... ); } // 객체분해할당 function Child({key1, key2}) { return ( ... ); } // default 파라미터 function Chi.. 2024. 7. 3. 이전 1 2 3 4 ··· 60 다음