01. 컴포넌트
(1)React Components란?
- 컴포넌트를 통해 UI를
재사용이 가능한개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. - 개념적으로 컴포넌트는 JavaScript
함수와 유사. “props”라고 하는 임의의입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는React 엘리먼트를반환.함수형 컴포넌트와 클래스형 컴포넌트, 두 가지 모두 기능상으로는 동일하지만
함수형 컴포넌트를 권장.
결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉함수이다.
누군가 와서 “컴포넌트를 만들어 보세요" 라고 한다면 우리는html 처럼 생긴 jsx를return 하는 함수를 만들면 됨.
1. 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}2. 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}(2) React 코드 살펴보기
1. 구조
- 컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다
- 컴포넌트
밖에서는 내가 필요한 파일을import하거나, 또는export default라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있음 - 컴포넌트
안에서는자바스크립트를 쓸 수 있는 부분이 있다. return을 기준으로 아랫부분에서는 HTML (정확히 말하면 JSX.) 을 작성할 수 있다.
여기에 작성한 html 코드와 값들이 화면에 보여짐.
2. 주의사항
- 컴포넌트를 만들 때 가장 첫 글자는 대문자
- 폴더는 소문자로 시작하는 카멜케이스로 작성
02. 부모-자식 컴포넌트
(1) 컴포넌트 안에 컴포넌트 넣기
- 컴포넌트는 다른 컴포넌트를 품을 수 있다.
품는 컴포먼트 =부모 컴포먼트, 품어지는 컴포넌트 =자식 컴포넌트
예제
// src/App.js
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />;
}
export default App;App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들었다.
Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그를 쓰듯이 넣었다.
이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있다.
이렇게 코드를 작성하면, 화면에는 “나는 자식입니다” 라는 문장이 보여진다.
이 파일에서 내보내진 (export default) 컴포넌트는 App 컴포넌트 이기때문에 App 컴포넌트가 화면에 보여진다.
그리고 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있다.
그래서 결국 자식 컴포넌트에 있는 “나는 자식입니다" 라는 문장이 보여지게 되는 것이다.
만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다. (Rendering)
그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 방식이 JSX
(2) [실습] 컴포넌트를 부모-자식 관계로 연결해보기
- 할아버지, 엄마, 자식 컴포넌트 만들고 연결하기
// src/App.js
import React from "react";
function Child() {
return <div>연결 성공</div>;
}
function Mother() {
return <Child />;
}
function GrandFather() {
return <Mother />;
}
function App() {
return <GrandFather />;
}
export default App;03. JSX
(1) JSX란?
JavaScript를 확장한 문법
JavaScript의 모든 기능이 포함되어 있으며,
React Element를 생성하기 위한 문법 (Element = 화면에 그려지는 HTML적 요소)
const element = <h1>Hello, world!</h1>;HTML을 품은 JS ⇒ JSX!
아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.
<div>
<h1>안녕하세요!</h1>
<p>시작이 반이다!</p>
</div>그래서 나온 게 JSX !
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다.
const start_half = <div>
<h1>안녕하세요!</h1>
<p>시작이 반이다!</p>
</div>;Q. JSX에서 쓰는 < div> ~~ < /div>는 DOM 요소인가?
A. 정확히는 React 요소
Q. 브라우저는 JS만 해석 가능한게 아닌가?
A. 맞다. 브라우저는 jsx 파일을 직접 해석할 수 없다. 따라서 babel을 이용하여 jsx를 js로 변환함
변환 전 - 우리가 보는 jsx 파일
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);변환 후 - 브라우저가 보는 js 파일
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);(2) JSX 주의점
1. 무조건 한개의 엘리먼트를 반환
import "./App.css";
function App() {
return (
<p>안녕하세요! 리액트 반입니다 :)</p> // return 아래에 p태그를 하나 추가
<div className="App">
<input type='text'/>
</div>
);
}
export default App;=> 에러남
import "./App.css";
function App() {
return (
<div className="App">
<p>안녕하세요! 리액트 반입니다 :)</p>
<input type="text" />
</div>
);
}
export default App;=> 에러 안남. 굿. 😎
2. JSX에서 javascript 값을 가져오기
중괄호 사용
function App() {
const cat_name = 'perl';
return (
<div>
hello {cat_name}!
</div>
);
} 📢 값을 가져올 때 뿐만 아니라 map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {} 사용 가능
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
const number = 1;
return (
<div className="App">
<p>안녕하세요! 리액트 반입니다 :)</p>
{/* JSX 내에서 코드 주석은 이렇게 씀 */}
{/* 삼항 연산자를 사용 */}
<p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
</div>
);
}
export default App;3. class 대신 className
<div className="App">4. 인라인으로 style 주기
📢 html 태그에 스타일을 직접 넣던 것처럼, css 문법 대신 json 형식으로 넣어주면 끝!
HTML
<p style="color: orange; font-size: 20px;">orange</p>JSX
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//혹은 스타일 객체를 변수로 만들고 쓸 수 있다.
function App() {
const styles = {
color: 'orange',
fontSize: '20px'
};
return (
<div className="App">
<p style={styles}>orange</p>
</div>
);
}📢 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까.
