[React] 3주차 - component & props
React 프로젝트 폴더 구조
- public: 정적(static) 자원이 위치한 폴더
- index.html: 가상 DOM을 위한 html 파일. index.js에 대응되는 html 템플릿 파일. 브라우저에 보여주는 화면
- manifest.json: 앱 스토어 없이 기기의 홈 화면에 설치할 수 있는 웹 사이트
- src: 리액트를 작업할 폴더
- component: 컴포넌트 파일들이 위치한 폴더
- App.js: 컴포넌트를 정의하는 프로그램. 화면에 보일 코드를 작성하는 파일
- App.css: App.js의 css 파일
- index.js: html 템플릿 및 자바스크립트의 컴포넌트를 조합하여 렌더링
👉 App.js(컴포넌트)의 내용이 index.js를 거쳐 index.html(화면)에 보여지는 것!
지난 주 복습
컴포넌트(Component)
속성을 나타내는 props
를 input으로 하고, UI가 어떻게 보여야 하는지 정의하는 React 엘리먼트
를 output으로 하는 함수
- 개념적으로 자바스크립트의 함수와 유사
- 리액트 컴포넌트는 함수 또는 클래스 형태로 작성 가능
- 쉽게 재사용 가능
- 알파벳 대문자로 시작
- src 폴더 안에 component 폴더 생성
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
function App() {
return (
<div className="App">
{/* 컴포넌트 사용 */}
<Subject />
</div>
);
}
export default App;
props
Properties의 줄임말로, 컴포넌트에게 전달하는 값이다.
예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 age
라는 값을 전달한다고 가정한다면 props는 객체 형태로 전달되며, props.age
로 age의 값을 찾는다.
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello age={10} />
);
}
export default App;
Hello.js
import React from 'react';
function Hello(props) {
return <div>{ props.age }</div>;
}
export default Hello;
state
컴포넌트에서 동적인 값
state 변경하는 카운터 만들기
구성
- App.js -> Props.js로 num 값(
props
) 전달 - Prop.js에서는 전달받은
{props.num}
값 출력
App.js
import { useState } from "react";
import Props from "./component/Props";
import "./App.css";
function App() {
let [num, setNum] = useState(0); // 변수 num의 초기값 = 0
function increase() {
setNum(++num); // 먼저 연산 후 num 값 저장
}
function decrease() {
setNum(--num);
}
return (
<div className="App">
<button onClick={ increase } className="btn">increase</button>
<button onClick={ decrease } className="btn">decrease</button>
{/* num 값을 Props 컴포넌트에 전달 */}
<Props num={num} />
</div>
);
}
export default App;
Props.js
export default function Props(props) {
return (
<div>
<h1>Count { props.num }</h1>
</div>
);
}
결과
참고 자료
프로젝트 구조: https://mjn5027.tistory.com/21
도서 「(초보자를 위한) 리액트 200제」
Author And Source
이 문제에 관하여([React] 3주차 - component & props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@smjan27/React-Study-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)