가장 기본적인 예제이기도 하면서, 많은사람들이 사용하는 Todo App을 만들면서 기본적인 내용들을 정리 해 보려고 한다
함수형 컴포넌트
import React from "react"; function App() { const name = "Superman"; return <div> {name} </div>; } export default App;
클래스형 컴포넌트
import React, { Component } from "react"; class App extends Component { render() { const name = "Superman"; return <div> {name} </div>; } } export default App;
클래스형 컴포넌트는 state 기능과 라이프사이클 기능을 활용 할 수 있고, 우리가 사용할 임의의 메서드를 정의 할 수 있다
모듈 내보내기
import React from "react"; const MyComponent = () => { return <div> my Component</div>; }; export default MyComponent;
export default MyComponent
는 위에서 작성한 MyComponent를 외부에서 사용 할 수 있도록 설정한다
모듈 불러오기
import React from "react"; import MyComponent from "./MyComponent"; const App = () => { return <MyComponent />; }; export default App;
export 된 MyComponent를 사용해서 화면에 보여주고있다
컴포넌트의 속성을 설정 할 때 사용하는 요소이다. 컴포넌트를 import 해서 사용 할 때 props도 같이 넘겨줄 수 있다
Props 사용해서 화면 나타내기
import React from "react"; const MyComponent = (props) => { return <div> my Component {props.test}</div>; }; export default MyComponent;
import React from "react"; import MyComponent from "./MyComponent"; const App = () => { return <MyComponent test="React" />; }; export default App;
props의 속성을 사용해서, 화면에 my Component React 를 나타 낼 수 있게 되었다
만약 props를 설정하지 않았을 경우에는 원하는 대로 보여주지 않을 수 있기 때문에 “default Props” 라는 걸 정해준다
Default Props
import React from "react"; const MyComponent = (props) => { return <div> my Component {props.test}</div>; }; MyComponent.defaultProps = { test: "리액트", }; export default MyComponent;
import React from "react"; import MyComponent from "./MyComponent"; const App = () => { return <MyComponent />; }; export default App;
props를 입력하지 않았지만, defaultProps 설정을 통해 “리액트” 가 나올 수 있도록 했다
props에서 데이터를 꺼내는 여러가지 방법
// 방법 1 const MyComponent = (props) => { const {name, test} = props; }; // 방법 2 const MyComponent = ({name, test}) => { };
props에서 데이터를 정하는 여러가지 방법
defaultProps로 기본 내용 지정 가능
propTypes로 변수 타입 및 필수값 설정 가능
// 기본값 설정 MyComponent.defaultProps = { test: "리액트", }; // 기본 타입 설정 및 필수변수 설정 MyComponent.propTypes = { test: PropTypes.string, name: PropTypes.string.isRequired }
사용 된 곳
<TestClassComponent name={"울이"} number={10}> 헬로헬로헬로 </TestClassComponent>
실제 코드
import React, { Component } from "react"; export default class TestClassComponent extends Component { render() { const { name, number, children } = this.props; return ( <div> 제 이름은 {name} 이구요 <br /> 저의 숫자는 {number} 이구요 <br /> children 값은 {children} 입니다 </div> ); } }