본문 바로가기

전체 글

 (73)
EventHandling 이벤트 사용 시, 주의사항 이벤트 이름 : 카멜 표기법 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값 전달 함수 형태의 객체 전달 DOM 요소에만 이벤트 설정 가능 즉, div, button, input, form, span 등의 DOM요소에만 이벤트 설정 가능 직접 만든 컴포넌트에는 이벤트 자체 설정 X ex) MyConponent에 onClick값을 설정하면, MyComponent를 클릭할 때 doSomething함수 실행하는 것이 아니라 그냥 이름이 MyComponent에게 onClick (props)를 전달 예제 e객체를 콘솔창에 출력 import React, {Component} from 'react'; class EventPractice extends Compone..
Hooks 1. useState 값을 변경하는 훅 2. useEffect 랜더링될 때마다 특정 작업을 수행하도록 설정하는 훅 const Info = () => { useEffect(() => { console.log('렌더링 성공'); console.log({ name, nickname }); }); }; 마운트될 때만 실행하고 싶을 때 함수의 두 번째 파라미터에 비어있는 배열 넣어주기 두 번째 파라미터에 값을 넣어주면, 그 값이 업데이트 될 때마다 useEffect(); 실행됨. useEffect(() => { console.log('마운트될 때만 실행'); }, []); 특정 값이 업데이트될 때만 실행하고 싶을 때 name이 업데이트될 때만, 업데이트를 콘솔창에 출력. useEffect(() => { conso..
파일 쓰임새 package.json 해당 프로젝트가 의존하고 있는 모든 패키지 이름, 버전 나열 패키지 관리 도구로 yarn 또는 npm를 사용하든 모두 해당 package-lock.json 파일 npm의 패키지 잠금 파일 yarn.lock 파일 yarn의 패키지 잠금 파일 깃허브에 node_modules를 제외하고 올리면 다른 사용자가 해당 프로젝트의 yarn install할 때, yarn.lock에 저장된 버전들을 그대로 다운받음.

티스토리툴바