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..

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들 면 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 1. 이벤트를 사용할 때 주의 사항 1. 이벤트 이르은 카멜 표기법으로 작성한다. 예를 들면 HTML의 onclick은 리액트에서 onClick으로 작성해햐 한다. 또 onkeyup은 onKeyUp으로 작성한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣지만, 리액트에서는 함수 형태의 객체를 전달한다..

변수 함수를 굳이 밖에 안빼도 된다. state를 자식에 만들면 부모 → 자식 전송할 필요가 없다. 근데 state가 Modal, App에서 필요하면 가장 최상위 컴포넌트에 보관하는 게 좋음 App에 보관 태그 에 뭔가 입력시 코드 실행하고 싶으면 onChange / onInput onMouserOver → 마우스를 올릴 때 이 코드 실행 onScroll → 스크롤 조작할 때 실행 input 태그에 입력한 값 가져오는 법 {console.log(e.target)}}> e를 넣어주면 이벤트객체라고 불리는거다. input 태그에서 발생하는 이벤트과 관련된 기능(변수)라고 보면 된다. e.target 이 이벤트가 발생하는 곳 e.target.value 이벤트가 입력한 값 input에 입력한 값 저장하려면 아래..