46일차 TIL : 후발대 수업

학습내용

• 12/12 수업내용 정리
• todolist - todo 기능 구현

리액트의 스타일 지정

<div style={객체 or 객체를 할당한 변수}>
컴포넌트 내에서 스타일을 지정할 때는 props를 내려주는 방식과 비슷하나 객체 형태로 지정한다.

functionName과 fucntionName()

• functionName 함수 자체
• functionName() 괄호 안에 있는 내용을 호출 후 리턴 실행

export와 export default

	export	export default
갯수 제한	없음	한 컴포넌트에 한 개의 함수(대표 함수)만 가능
export	export {함수명}	export default 함수명
import	import {export 이름 = named export}	import (직접 정의한 이름) from 경로

export의 경우 as를 사용하면 export와 import시 함수명을 임의로 변경할 수 있다.

export as

export {originName as ChangedName};

import as

import {originName as ChangedName} from './moduleFile.js;

onClick과 onSubmit

자바스크립트를 호출하는 이벤트 핸들러

	onClick	onSubmit
사용	제한 없음	form 태그 안에서만 사용
이벤트 트리거	마우스 클릭	마우스 클릭, 인풋 포커스 후 엔터, 인풋 타입 등
자동 새로고침	X	O

onSubmit을 사용하는 경우, 자동 새로고침으로 인한 리렌더링을 방지하기 위해선 preventDefault() 메서드와 함께 사용해야 한다. 이러한 번거로움이 있음에도 사용하는 이유는 다양한 이벤트 트리거를 제공하기 때문이다.

Event.preventDefault()

이벤트에 대한 기본 동작을 실행하지 않도록 지정하는 메서드. 어떤 단계에서건 preventDefault()를 호출하면 이벤트가 취소되지만, 취소가 불가능한 이벤트의 경우는 호출여부와 상관없이 동작한다.

📌 Mdn 문서 참조