React 복습
React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
Component-based : 컴포넌트 기반
컴포넌트를 조합해서 웹 페이지를 나타낸다.
문법은 JSX문법.
cmd 들어가서
cd React -> 해당 프로젝트 폴더에 들어간다.
-프로젝트 설치
yarn create react-app <프로젝트 이름>
-프로젝트 실행
해당 프로젝트 폴더로 이동하여 yarn start 입력
function App() {
//함수형 컴포넌트
}
JSX 문법
장점 : 일반 자바스크립트 보다 간편하다, 가독성이 좋다.
html과 코드가 비슷하기 때문에 html을 안다면 JSX를 작성하는데에 문제가 없다.
1. 부모 요소로 무조건 감싸줘야한다. like div태그 아님 저스트 <>만 있어도 된다.
import React from 'react';
function App() {
return (
<div>
<h1>리액트!</h1>
</div>
)
}
export default App;
2. 자바스크립트 표현식을 사용하려면 {}로 감싸줘야한다.
import React from 'react';
function App() {
const name = "코딩온";
return (
<div>
<h1>{name} 리액트!</h1>
</div>
)
}
export default App;
3. 조건부 연산자(IF문) X -> jsx 밖에서 사용하거나 중괄호를 사용.
{ 조건식 ? (true) : (false) }
import React from 'react';
function App() {
const name = "코딩온";
return (
<>
{ name === "코딩온" ? (<h1>코딩온입니다.</h1>) : (<h2>코딩온이 아닙니다.</h2>)}
</>
)
}
export default App;
false일 때 아무것도 보고싶지않으면 null 적기
import React from 'react';
function App() {
const name = "코딩온";
return (
<>
{ name === "홍길동" ? (<h1>코딩온입니다.</h1>) : null }
</>
)
}
export default App;
&&연산자 -> 조건식이 참이면 그 뒤에 코드 실행 아니면 아무것도 실행 X
import React from 'react';
function App() {
const name = "코딩온";
return (
<>
{ name === "코딩온" && <h1>코딩온입니다.</h1> }
</>
)
}
export default App;
4.카멜표기법(background-color를 backroundColor 이렇게 표기)
import React from 'react';
function App() {
const name = "코딩온";
const style = {
backgroundColor : "orange",
color : "black",
fontSize : "40px",
fontWeight : "bold"
};
return (
<>
<div style={style}>
{name}
</div>
</>
)
}
export default App;
이런식으로 그냥 넣어줄 수도 있음
import React from 'react';
function App() {
const name = "코딩온";
const style = {
backgroundColor : "orange",
color : "black",
fontSize : "40px",
fontWeight : "bold"
};
return (
<>
<div style={{
backgroundColor : "orange",
color : "black",
fontSize : "40px",
fontWeight : "bold"
}}>
{name}
</div>
</>
)
}
export default App;
주석은
/* */
5. CSS는 className으로 사용.
import React from 'react';
import './App.css';
function App() {
const name = "코딩온";
return (
<>
<div className="test">
{name}
</div>
</>
)
}
export default App;
.test{
background : blue;
color: ivory;
font-size: 40px;
}
6. 태그는 무조건 닫아줘야한다.
컴포넌트
함수형 컴포넌트
클래스형 컴포넌트
import React from 'react';
import {Component} from 'react';
class App extends Component {
render() {
return(
)
}
}
export default App;
다른 컴포넌트를 불러오기
#App.js
import React from 'react';
import {Component} from 'react';
import Test from "./Test";
class App extends Component {
render() {
return(
<Test />
)
}
}
export default App;
#Test.js
import React from 'react';
import {Component} from 'react';
class Test extends Component {
render() {
return(
<div>
안녕하세요
</div>
)
}
}
export default Test;
컴포넌트 속성값 : properties => props
#함수형 컴포넌트
import React from 'react';
const Test = () => {
return(
)
}
export default Test;
import React from 'react';
const Test = props => {
return(
<div>안녕, 난 {props.hello}이야!</div>
)
}
export default Test;
import React from 'react';
import {Component} from 'react';
import Test from "./Test";
const App = () => {
return(
<Test hello="코딩온이지롱"></Test>
)
}
export default App;
태그 사이의 값을 가져오는 것 : children
import React from 'react';
import {Component} from 'react';
import Test from "./Test";
const App = () => {
return(
<Test hello="코딩온이지롱">하하하하</Test>
)
}
export default App;
import React from 'react';
const Test = props => {
return(
<>
<h1>안녕, 난 {props.hello}이야!</h1>
<br />
<h2>children의 값은 {props.children}</h2>
</>
)
}
export default Test;
props를 앞에서 미리 선언하는 것도 있음
import React from 'react';
const Test = props => {
const { hello, children } = props;
return(
<>
<h1>안녕, 난 {hello}이야!</h1>
<br />
<h2>children의 값은 {children}</h2>
</>
)
}
export default Test;
props 자리에 넣어줘도 됨
import React from 'react';
const Test = ({ hello, children }) => {
return(
<>
<h1>안녕, 난 {hello}이야!</h1>
<br />
<h2>children의 값은 {children}</h2>
</>
)
}
export default Test;
클래스형 컴포넌트 props 불러오기
import React from 'react';
import {Component} from 'react';
import Test from "./Test";
const App = () => {
return(
<Test name="코딩온">하하하하</Test>
)
}
export default App;
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Test extends Component {
render() {
const { name, children } = this.props;
return(
<>
<div>안녕하세요, 제 이름은 {name}입니다.</div>
<br />
children 값은 {children}입니다.
</>
)
}
}
export default Test;
CDN 링크
#REACT 라이브러리 삽입
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
createElement()
React.createElement(
type,
[props],
[...children]
)
<body>
<div id="root"></div>
</body>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
-> <h1>Hello, world!</h1>
//append()와 유사.
ReactDom.render(element, rootElement); //rootElement에 element 삽입.
</script>
<body>
<div id="root"></div>
</body>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
const element2 = React.createElement("p", null, "Bye bye!");
const element3 = React.createElement("h3", null, "Bye world!");
const form = React.createElement("div", null, [element, element2, element3]);
-> <div>이 태그 사이에 element들이 들어가서 나타남</div>
ReactDom.render(element, rootElement);
</script>
state 상태값
#REACT 라이브러리 삽입
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
React.createElement(
type,
[props],
[...children]
)
<body>
<div id="root"></div>
</body>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
-> <h1>Hello, world!</h1>
//append()와 유사.
ReactDom.render(element, rootElement); //rootElement에 element 삽입.
</script>
<body>
<div id="root"></div>
</body>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
const element2 = React.createElement("p", null, "Bye bye!");
const element3 = React.createElement("h3", null, "Bye world!");
const form = React.createElement("div", null, [element, element2, element3]);
-> <div>이 태그 사이에 element들이 들어가서 나타남</div>
ReactDom.render(element, rootElement);
</script>
-클래스형 컴포넌트가 가지고있는 state
-함수형 컴포넌트가 가지고있는 useState
클래스형 컴포넌트
import React, {Component} from 'react';
class Enter extends Component {
constructor(props) {
super(props);
this.state = {
enter: 0
};
}
render() {
const { enter } = this.state;
return (
<div>
<h2>입장한 사람 수 : {enter}명</h2>
<button onClick={() => {
this.setState({ enter : enter + 1});
}}>
입장
</button>
</div>
)
}
}
export default Enter;
import React, {Component} from 'react';
class Enter extends Component {
state = {
enter: 0
};
render() {
const { enter } = this.state;
return (
<div>
<h2>입장한 사람 수 : {enter}명</h2>
<button onClick={() => {
this.setState({ enter : enter + 1});
}}>
입장
</button>
</div>
)
}
}
export default Enter;
함수형 컴포넌트
import React, { useState } from 'react';
const Lan = () => {
const [ msg(현재상태), msg_change(행동하는 함수) ] = useState("");
const KorEnter = () => msg_change("안녕안녕??");
const EngEnter = () => msg_change("hello hello??");
return(
<div>
<h1>{msg}</h1>
<button onClick={KorEnter}>한국어</button>
<button onClick={EngEnter}>영어</button>
</div>
)
}
export default Lan;
Author And Source
이 문제에 관하여(React 복습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gordthemun/React-복습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)