sm 기술 블로그

어떤 이벤트가 발생했을 때 어떤 작업을 처리하는 일 import './App.css'; function Header(props){ return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } ... 생략 ... function App() { ... 생략 ... return ( { alert('Header'); }}> ); } export default App; 먼저 상위 컴포넌트 부터 확인해보자. onClick의 이벤트가 발생하면 , event.preventDefault(); props.onChangeMode(); 다음과 같은 함수가 실행된다. event.preventDefault()는 a태그의 이벤트를 막는다는 의미이다. props..

props란? properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달할 때 사용한다. (상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용한다. - 단방향 데이터 흐름) props 는 자식 입장에서 수정할 수 없고 읽기 전용이다. 1. 기본구조 //app.js ... 생략 ... function Header(props){ return {props.title} } ... 생략 ... function App() { return ( ); } ... 생략 ... 3강에서 컴포넌트를 이용하여 작성하는 방법을 배웠다. 컴포넌트를 쓰기 위해 함수를 정의하는데 함수의 매개변수 란에 props를 명시해줌으로써, props 사용이 가능해 진다. 하위 컴포넌트에서 title은 WEB이라는 값을 주었다. 그 ..

Back-End (SpringBoot - JPA(with.IntelliJ)) 1.SpringBoot Initializr 다음과 같이 작성하고 Generate를 통해 다운받아준다. 2. aplication.properties 수정 먼저 properties를 yml로 수정해주자 server: port: 8087 spring: devtools: livereload: enabled: true freemarker: cache: false datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/데이터베이스이름?useUnicode=true&characterEncoding=utf8&autoReconnect=true&..

먼저 리액트를 순수한 상태로 만들자. src에 App.css / App.js / index.js를 제외한 것들은 지워주자. 또한 각 파일에 내용을 다음처럼 바꿔주자. // App.css Empty //App.js import './App.css'; function App() { return ( 안녕 ); } export default App; // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to..