천천히 알아보는 코딩공부

해당 예제는 검색 input 에서 입력되는 값을 다른 router 로 보내 처리해주는 방식이다 head.js function Header({onChange}) { return ( ) } App.js function App() { const [search, setSearch] = useState(""); const onChange = (event) => { setSearch(event.target.value) } return ( ) } useState 사용 했던 이유는 onchange 값이 바뀌면 home 화면도 바뀌기 위함이다. Home.js function Home(props) { return ( {props.search} ) } props.search 에 값이 전달된다.

https://daeseok94.tistory.com/45 [react] react-router-dom v6 으로 navigate 만들어보기 1. 해당 프로젝트에 react-router-dom 사용 환경 준비 yarn을 통해 설치 yarn add react-router-dom npm을 통해 설치 npm install react-router-dom BrowserRouter : React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을 daeseok94.tistory.com router 사용 예제는 위를 참고해주세요!! Link 사용시 URL에 파라미터 표시 App.js 예 ) URL localhost.com/study_main/3 Link 삽입하는 곳 Link 로 넘어간 페이지 파라미터 가져오기 con..

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

삼항연산자 import React from 'react'; function App() { const test = 12345; return ( { test === 12345 ? 맞아요 : 틀려요 } ); } export default App; = 맞아요 부분이 12345가 맞으면 해당 div 출력 and 연산자 사용 import React from 'react'; function App() { const test = 12345; return ( test === 12345 && 맞아요 (AND연산) ); } export default App; 즉시발동함수를 통한 조건문 처리 import React from 'react'; function App() { const word = 'react'; return ( ..

리액트에서는 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..