천천히 알아보는 코딩공부

리액트에서는 html을 반복문으로 반복시킬 수 있다. map() 함수 개념 array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용. //자바스크립트 표현 var arr = [2, 3, 4]; arr.map(function(a){ return a * 2 }); //(3) [4, 6, 8] arr 내에 있는 데이터들을 파라미터 a에 넣어서 모두 2씩 곱해줄 수 있다. map은 유사 반복문이다. React에서 반복문 쓰는 법 : .map() 우선 JSX 중괄호 내에서 for을 사용할 수 없다. map()은 사용가능하다. 예제 1 return ( {users.map(user => ( {user.username} ({user.name}) ))} ); 예제 2 { 글제목.map(function(글){ ..

API 호출하기 위해서 라이브러리를 설치해보자 https://meetup.toast.com/posts/92 - rest api npm install axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. GET: 데이터 조회 POST: 데이터 등록 PUT: 데이터 수정 DELETE: 데이터 제거 axios 사용법 Get 방식 import axios from 'axios'; axios.get('https://localhost:4000/sendlist/todo', {userId: userId}, { withCredentials: true } ) Post axios.post('/users', { username: 'blabla', name: 'bla..

React에서 기본적으로 지원하는 Hooks 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext 부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다. 4. useReducer state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다. 5. useRef 컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다. 6. forwardRef useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다. 7. useImperativeHandle useRef로 만..

npm 으로 설치시 저런 에러가 발생 시 npm install ??? --force or npm install ??? --legacy-peer-deps를 하면 된다고 한다. 실제로도 해결되었다. --force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가한다. --legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다. 일단 --force를 해서 다른 의존버전들을 추가하고 실행해보고 안되면 --legacy를 해서 일단 오류없이 설치한 후 실행해보는 게 좋은 것 같다.

npm 으로 설치시 저런 에러가 발생 시 npm install ??? --force or npm install ??? --legacy-peer-deps를 하면 된다고 한다. 실제로도 해결되었다. --force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가한다. --legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다. 일단 --force를 해서 다른 의존버전들을 추가하고 실행해보고 안되면 --legacy를 해서 일단 오류없이 설치한 후 실행해보는 게 좋은 것 같다.

click 이벤트입니다. 해당 function 은 body에 toggle-sidebar라는 classname을 추가해주거나 삭제해줍니다. function Header() { const handleClick = event => { document.body.classList.toggle('toggle-sidebar') }; return ( ... ... ); } export default Header;