JavaScript/React.js 3

[React.js] 이벤트 처리

애플리케이션을 역동적으로 만들어주는 이벤트 만들기 *참고 React에서 컴포넌트 안의 render() 함수는 props 값이나 state 값이 바뀌면 다시 호출되어 화면이 그려진다. ※ 자세한 내용참고 https://ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org React에서의 이벤트 처리 사용 예제 class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } ▷ Subject.js 파일의 Subject 컴포넌트 ▶ JSX..

JavaScript/React.js 2023.02.07

[React.js] 컴포넌트 State

State란 컴포넌트의 기본적인 동작을 바꾸기 위해 속성인 props 이용하여 사용자가 조작할 때, 이 props값에 따른 내부의 구현에 필요한 데이터 → 컴포넌트가 좋은 부품이 되기위해서는 외부의 props 와 내부의 state가 철저히 분리되어있어야 함 *정리 props - 사용자가 컴포넌트를 사용하는 입장에서의 데이터 state - props값에 따란 내부의 구현에 필요한 데이터 ※ 자세한 내용 참고 https://ko.reactjs.org/docs/state-and-lifecycle.html State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org State 사용 예제 class App e..

JavaScript/React.js 2023.02.02

[React.js] 컴포넌트(Component) 만들기

컴포넌트란 UI 재사용을 위해 개별적인 여러조각으로 나눈 것으로 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하는 기술 ※ 자세한 내용 참고 https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org 간단한 컴포넌트 작성법 - JavaScript 함수 이용 class Sample extends Component { // 컴포넌트 만들기 render() { return ( // 하나의 최상위 태그로 시작 Hello ); } } 사용 예제 import './App.css'; import { Componen..

JavaScript/React.js 2023.01.31