router 2: navigate, nested routes, outlet 페이지 이동을 도와주는 useNavigate() - 아래 함수를 실행하면 페이지 이동됨 { navigate('/detail')}}>상세페이지 앞으로, 뒤로 이동 { navigate (1) }}>Home 앞으로 1 페이지 이동 { navigate(-1) }}>Home -1 페이지 이동 404 페이지는 아래 코드로 입력

리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 청므으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프 사이클 메서는 클래스형 컴포넌트에서만 사용할 수 있다. 함수 컴포넌트를 사용할 수 없다. 함수 컴포넌트에서는 사용할 수 없다. 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리 할 수 있다. 1. 라이플사이클 메서드의 이해 라이플사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. ..

const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 코드가 다음 형태로 반복 된다. 지금은 li만 있어서 크게 문제가 되지 않지만, 코드가 복잡해진다면 용량도 늘어나면서 효율적이지 못하다. 그리고 보여줘야할 데이터가 유동적이라면 코드 관리가 힘들 것이다. 1. 자바스크립트 배열의 map()함수 2. 문법 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) 이 함수..

react-router-dom 페이지 나누는법 (리액트 미사용) html 파일 만들어서 상세페이지 내용 채움 누가 /detail 접속하면 html 파일 보내줌 페이지 나누는 법 (리액트 사용) index.html 만 사용 컴포넌트 만들어서 상세페이지 내용 채움 누가 /detail 접속하면 그 컴포넌트 보여줌 라우터 설치해야함 npm install react-router-dom@6 설치 후 index.js파일로 이동 아래와 같이 이 태그로 app 파일 감싸면 된다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 또한 이렇게 import 해야한다. import App from './App' 이런거는 경로라서..

import / export / state 데이터 바인딩 export / import 문법 다른 파일에 있는 것을 가지고 올 수 있음 그럴려면 export/ import 문법이 필요함. 변수를 export하고 import하면 끝 export 하려면 → export default 변수명 let a = 10; export default 변수명 export 여러개 하려면 → export {변수1, 변수2} let a = 10; let b = 100; export { a, b } import 하려면 → import 작명 from ‘파일경로’ import 작명 from './data.js' import 여러개 하려면 → import{ 변수1, 변수2 } from ‘경로’ import {a, b} from './d..

[level 1] 정수 제곱근 판별 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 n return 121 144 3 -1 입출력 예 설명 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 나의 풀이 function solution(n) { var answer = 0; if(Math.sqrt(n) % 1 !== 0) { ..