민톨이의 개발기록장

addEventListener사용시 클린업 해야함 클린업 함수는 이펙트를 사용하는 컴포넌트가 화면에서 사라질때 실행되므로 클린업을 하지않으면 요소가 사라져도 스크롤이벤트가 계속 발생 useEffect(() => { function handleScroll(e) { console.log(window.scrollX, window.scrollY); } window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); -컴포넌트가 언마운트되어 화면에서 사라질때 1. 첫번째렌더링 2. useEffect코드 실행 3. 컴포넌트가 언마운트되면 클린업실행 -컴포넌트가 계..

예제 import { useState, useRef, useEffect } from 'react'; import './App.css'; import MyInput from './Myinput'; export default function App() { //초기값 설정 const [firstName, setFirstName] = useState('테일러'); const [lastName, setLastName] = useState('스위프트'); const [toggleForm, setToggleForm] = useState(true); function handleFirstName(e) { setFirstName(e.target.value); } function handleLastName(e) { setL..

이벤트핸들러에서 prop읽기 - 이벤트 핸들러는 컴포넌트 내부에서 선언되기 때문에 컴포넌트의 props에 접근할 수 있다. import './App.css'; function AlertButton({ message, children }) { return ( alert(message)}> {children} ); } export default function Toolbar() { return ( 영화 Play 이미지 업로드 ); } => 클릭하면 message prop과 alert을 표시하는 버튼 결과물) 부모의 이벤트핸들러를 prop으로 전달 버튼컴포넌트를 사용하는 부모컴포넌트의 기능이 서로 다른 경우 플레이버튼: 영화 재생, 업로드버튼: 이미지 업로드이며 모양은 같은 경우 버튼컴포넌트는 부모로부터 이벤..

이벤트핸들러 추가 컴포넌트 내부에 이벤트핸들러 정의 handle+동사+명사 형태로 이벤트핸들러의 기능으로 네이밍 (ex/ handle + Show(동사) + Alert(명사) ) 이벤트핸들러를 이벤트속성에 전달만 해야하며 handleShowAlert()하면 바로 실행되어버림 import './App.css'; export default function Button() { function handleShowAlert() { alert('클릭!'); } return ( 클릭 ); } -인라인 이벤트 핸들러: 짧은 함수일 경우 사용 import './App.css'; export default function Button() { return ( alert('클릭!')}> 클릭 ); }

리스트렌더링 배열 데이터는 map메서드로 렌더링 리스트가 정렬, 이동, 삭제등으로 변경되더라도 리액트가 알 수 있도록 고유 key 제공해야함, map메서드의 index는 배열요소 순서가 변경되면 바뀌므로 사용불가 // App.jsx import './App.css'; const people = [ 'Creola Katherine Johnson: 수학자', 'Mario José Molina-Pasquel Henríquez: 화학자', 'Mohammad Abdus Salam: 물리학자', 'Percy Lavon Julian: 화학자', 'Subrahmanyan Chandrasekhar: 천체 물리학자', ]; export default function List() { const listItems = peop..

이모지 단축키 : 윈도우키 + . (마침표) if 조건문 사용하여 렌더링 예제) function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } => if 문을 사용하여 조건에 맞게 렌더링 시킨다. =>isPacked가 true이면 '✔'가 나온다. (isPacked가 false인 가족사진은 체크가 뜨지 않을 것이다!!!) 삼항연산자로 중복 줄이기 import './App.css'; function Item({ name, isPacked }) { return {isPack..

스프레드 문법으로 props전달 -부모의 모든 props를 자식 컴포넌트에 전달할 경우 props객체로 받고 자식컴포넌트에 스프레드 문법으로 전달 => 스프레드[Spread] 문법이란? 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 것 ```js // utils.js export function getImageUrl(person, size = 's') { return `https://i.imgur.com/${person.imageId}${size}.jpg`; } ``` ```js // Avatar.jsx import { getImageUrl } from './utils.js'; export default function Avatar({ person, size, border }) { return (..

부모컴포넌트에서 props를 통해 자식 컴포넌트로 정보전달 부모에서 props 객체전달하고 자식 컴포넌트에서 구조분해할당하여 같은 이름으로 받음 props는 변경불가하며 상호작용이 필요한 경우 state 사용 컴포넌트 렌더링시 마다 새로운 props를 받음 // App.jsx import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( ); } export default function Profile() { return ( ); } // utils.js export function getImageUrl(person, size = 's') { return `https://i.imgur.com/${person.im..

컴포넌트에서 렌더링 로직과 마크업을 한번에 표현하여 return 하나의 부모 태그로 감싸야하며 부모태그를 쓰지않을 경우 프레그먼트 사용 jsx내부에서 여러 객체를 하나의 배열로 감싸서 return하는 것과 같음 self closing 태그도 형태로 닫아야함 태그 속성명은 카멜케이스이며 예약어인 경우 className, htmlFor 사용 예제) html을 jsx로 변환하여 TodoList컴포넌트 만들기 Hedy Lamarr's Todos 새로운 신호등 발명 영화 장면 리허설 스펙트럼 기술 개선 체크박스 => 이 html을 jsx로 변환하면? import './App.css'; export default function TodoList() { return ( Hedy Lamarr's Todos 새로운 신호..

컴포넌트 import, export 재사용하려면 컴포넌트가 파일로 분리되어 있어야함 파일 = 모듈이며 es모듈로 파일간 접근가능 Gallery.jsx 파일 생성함수컴포넌트 default로 export하면 import시 이름 변경가능 상대경로(./ 생략불가)로 컴포넌트 import, 확장자는 생략가능하지만 명시하는게 좋음 Default와 Named Export 한 파일에는 하나의 export default만 존재해야하며 부모함수컴포넌트는 export default하여 import시 {}없이 가져오며 이름변경가능 named export는 최상위(파일) 레벨에서만 가능하며 import시 { 변수명, 함수명 as 함수명2}로 가져오며 as로 이름변경가능 일반적으로 한파일에서 하나의 컴포넌트를 export def..