props 2

React.js - 이벤트 처리하기, State로 상태관리하기, State와 Props, State로 사용자 입력 관리하기 1

이벤트 처리하기// Button.jsxconst Button = ({ text, color, children }) => { // 이벤트 객체 const onClickButton = () => { console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};Button.defaultProps = { color: "black",};export default Button;  버튼을 클릭하거나 마우스를 갖다대는 등의 이벤트를 처리하는 '이벤트 핸들링'을 배웠다.  button 태그 내부에 이벤트 이름을 입력하고, 화살표 함수 ()=>{} 를 중괄호 안에 넣어주는 방법이 있다. 만약 내부 ..

React.js - React 컴포넌트, JSX로 UI 표현하기, Props로 데이터 전달하기

React 컴포넌트 컴포넌트란, JSX (html 태그를 사용할 수 있는 확장된 자바스크립트 문법) 로 작성된 함수 또는 클래스를 말한다. 컴포넌트는 리액트 앱의 기본 구성 요소가 된다. 웹은 크게 Header, Main, Footer 부분으로 나눌 수 있고 이 역시 컴포넌트화 되는데, 구분하기 편하게 jsx 파일로 모듈화까지 한다. 또한, 리액트 앱에서 컴포넌트들은 계층구조를 가진다. 가장 최상위 계층은 root 컴포넌트이다. 관례적으로 루트 컴포넌트는 App 컴포넌트를 사용한다. 이러한 App 컴포넌트는 부모 컴포넌트가 되고, 자식으로는 헤더, 메인, 푸터 컴포넌트를 가지게 되겠다.  **(참고) vite로 만든 리액트 앱에서는 import 할 때 확장자를 쓰지 않아도 된다.JSX로 UI 표현하기 J..