전체 글 (35) 썸네일형 리스트형 Props Props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. JSX내부에서 props 렌더링 우선 MyComponent에서 name이라는 props를 렌더링하도록 설정해보자. import React from "react"; const MyComponent = (props) => { return 안녕하세요. 제 이름은 {props.name}입니다. ; }; export default MyComponent; App컴포넌트에서 props의 값을 지정해 보자. App.js의 코드를 다음과 같이 수정해보자. defaultProps는 값을 정했을 때 기본으로 보여주는 기본값을 설정하는 부분이다. import React from "react"; import MyComponent from "./MyComponent"; .. 컴포넌트 생성 1. src 디렉터리에 MyComponent.js파일을 생성하자. 2. 해당 파일에 다음과 같은 코드를 작성해보자. () => {} 와 같은 함수는 ES6에서 도입된 화살표 함수 문법이다. import React from "react"; const MyComponent = () => { return 나의 새롭고 멋진 컴포넌트; }; export default MyComponent; 맨 아래 보이는 export default MyComponent; 바로 이 코드가 다른 파일에서 이 파일을 import할 수 있도록 설정해준다. 3. 모듈 불러오기 기존 App.js의 내용을 모두 지우고, 다음과 같은 코드를 작성해보자. import React from "react"; import MyComponent from.. 클래스형 컴포넌트와 함수형 컴포넌트 컴포넌트를 선언하는 방법은 두 가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 리액트를 처음 설정하면, 다음과 같은데 이 형태를 함수형 컴포넌트라고 한다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 클래스형 컴포넌트는 다음과 같다. 역할은 함수형 컴포넌트와 똑같다. (함수형 컴포넌트와의 차이점은 클래스형 컴포넌트의 경우 state기능 및 라이프사이클 기능, 임의 메서드를 정의할 수 있다는 것이다. ) 클래스형 컴포넌트에는 render가 꼭 있어야 한다... 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
