one Book a Day

4. 이벤트 핸들링 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 event라 함. 1. 리액트의 이벤트 시스템 HTML 이벤트와 인터페이스가 동일하다. const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요"); const onClickLeave = () => setMessage("안녕히 가세요!"); const [color, setColor] = useState("black"); return ( 입장 퇴장 주의점 이벤트는 카멜케이스로 작성한다.(onclick -> onClick) 이벤트에 실행할 JS 코드가 아니라 함수형태의 값을 전달. HTML은 큰따..

존경하는 김민준 개발자님의 저서를 읽고 정리했습니다. 컴포넌트 컴포넌트의 기능은 단순 템플릿 이상이다. data가 주어졌을 때 이에 맞추어 UI를 만들어 줌, 라이프사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있습니다. 클래스형 컴포넌트 클래스는 state및 라이프사이클 기능 사용가능, 임의 메서드 작성 가능. JS의 클래스는 ES6에서 생김. 그전에는 prototype을 사용해야했음. render함수 안에서 보여주어야 할 JSX를 반환해야함. 함수형 컴포넌트 선언하기 편하고 메모리 자원도 클래스형보다 덜 사용한다. 빌드 후 배포할때도 함수형 컴포넌트를 사용하는 것이 파일 크기가 더 작다. (별 차이 없긴..