React 메모장
Basic
import React, { Component } from 'react'; // react 모듈을 불러와서 사용하겠다!
// (react를 사용할땐 꼭 저렇게 import해줘야함)
class App extends Component { // Component를 만드는 방식은 총 2가지가 있다 Class/함수
render() { // render()에서는 꼭 JSX형태의 코드를 리턴해 줘야함
return (
<div> //이게 바로
<h1>안녕하세요 리액트</h1> //JSX
</div> //Code!
);
}
}
export default App; // 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기 해주기
JSX
JS로 변환되는 HTML
🔥tag는 꼭 닫혀 있어야함
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<input type="text"> // 이러면 아래와 같은 Error
</div> // 꼮! <input type="text"/> /로 닫아주기🔥🔥🔥🔥
);
}
}
export default App;
🔥2개 이상의 Element는 무조건 하나 이상의 Element로 감싸져 있어야함!!
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>상자1</div> //불가능!!
<div>상자2</div> // 다른 ELement로 감싸줘🔥🔥
<div>
<div>상자1</div>
<div>상자2</div> // 편안..
</div>
);
}
}
export default App;
🔥 Fragment있으면 괜찮아!!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<div>상자1</div>
<div>상자2</div> // 편안..
</Fragment>
);
}
}
export default App;
불필요한 상위 div가 없쥬?
🔥JSX 내부에서 JS 값 사용하기!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
<h1>hello {name}</h1> //🔥🔥🔥 이렇게 {}로 감싸주면 사용 가능!
</div>
);
}
}
export default App;
🔥조건부 렌더링1
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
1 + 1 === 3
? '맞다' // 🔥🔥조건문!
: '틀리다'
}
</div>
);
}
}
🔥조건부 렌더링2 (삼항연산자)
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
name === 'react' && <div>리엑트다!!</div>
}
</div>
);
}
}
export default App;
🔥조건부 렌더링3 (화살표 함수)
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const value = 2; // 변수 설정!!
return (
<div>
{
(() => {
if (value === 1) return <div>1이다!</div>
if (value === 2) return <div>2이다!</div>
if (value === 3) return <div>3이다!</div>
return <div>없다</div>
})() // 🔥🔥즉시 실행 함수!
}
</div>
);
}
}
export default App;
🔥CSS 적용시키기!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const style= {
backgroundColor: 'purple', // 🔥🔥 '-'있던 style요소들은 camelCase로!!
padding: '16px',
color: 'yellow',
fontSize: 30 + 6 + 'px' // 🔥🔥 JS의 특징 그대로 사용 가능!
}; // 변수 설정!!
return (
<div style={style}> // 🔥🔥 중괄호로 JS값 불러오기!
안냐세요!
</div>
);
}
}
export default App;
🔥CLASS 적용하는 법!
import React, { Component, } from 'react';
import './App.css' // 🔥🔥 Class 불러오기!
class App extends Component {
render() {
return (
<div className="App"> // 🔥🔥 class 적용하기!
안냐세요!
</div>
);
}
}
export default App;
🔥주석 처리하는 법! (CLASS)
import React, { Component, } from 'react';
import './App.css'
class App extends Component {
render() {
return (
<div>
{/*🔥🔥🔥React에서는 이렇게 주석처리 할 슈 있어요*/}
<h1
className="adfasdf" // 근데 또 이렇게는 됨 ㅋㅋㅋ??? >
React!
</h1>
</div>
);
}
}
export default App;
Author And Source
이 문제에 관하여(React 메모장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@kich555/React-메모장
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React, { Component } from 'react'; // react 모듈을 불러와서 사용하겠다!
// (react를 사용할땐 꼭 저렇게 import해줘야함)
class App extends Component { // Component를 만드는 방식은 총 2가지가 있다 Class/함수
render() { // render()에서는 꼭 JSX형태의 코드를 리턴해 줘야함
return (
<div> //이게 바로
<h1>안녕하세요 리액트</h1> //JSX
</div> //Code!
);
}
}
export default App; // 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기 해주기
JS로 변환되는 HTML
🔥tag는 꼭 닫혀 있어야함
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<input type="text"> // 이러면 아래와 같은 Error
</div> // 꼮! <input type="text"/> /로 닫아주기🔥🔥🔥🔥
);
}
}
export default App;
🔥2개 이상의 Element는 무조건 하나 이상의 Element로 감싸져 있어야함!!
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>상자1</div> //불가능!!
<div>상자2</div> // 다른 ELement로 감싸줘🔥🔥
<div>
<div>상자1</div>
<div>상자2</div> // 편안..
</div>
);
}
}
export default App;
🔥 Fragment있으면 괜찮아!!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<div>상자1</div>
<div>상자2</div> // 편안..
</Fragment>
);
}
}
export default App;
불필요한 상위 div가 없쥬?
🔥JSX 내부에서 JS 값 사용하기!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
<h1>hello {name}</h1> //🔥🔥🔥 이렇게 {}로 감싸주면 사용 가능!
</div>
);
}
}
export default App;
🔥조건부 렌더링1
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
1 + 1 === 3
? '맞다' // 🔥🔥조건문!
: '틀리다'
}
</div>
);
}
}
🔥조건부 렌더링2 (삼항연산자)
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
name === 'react' && <div>리엑트다!!</div>
}
</div>
);
}
}
export default App;
🔥조건부 렌더링3 (화살표 함수)
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const value = 2; // 변수 설정!!
return (
<div>
{
(() => {
if (value === 1) return <div>1이다!</div>
if (value === 2) return <div>2이다!</div>
if (value === 3) return <div>3이다!</div>
return <div>없다</div>
})() // 🔥🔥즉시 실행 함수!
}
</div>
);
}
}
export default App;
🔥CSS 적용시키기!
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const style= {
backgroundColor: 'purple', // 🔥🔥 '-'있던 style요소들은 camelCase로!!
padding: '16px',
color: 'yellow',
fontSize: 30 + 6 + 'px' // 🔥🔥 JS의 특징 그대로 사용 가능!
}; // 변수 설정!!
return (
<div style={style}> // 🔥🔥 중괄호로 JS값 불러오기!
안냐세요!
</div>
);
}
}
export default App;
🔥CLASS 적용하는 법!
import React, { Component, } from 'react';
import './App.css' // 🔥🔥 Class 불러오기!
class App extends Component {
render() {
return (
<div className="App"> // 🔥🔥 class 적용하기!
안냐세요!
</div>
);
}
}
export default App;
🔥주석 처리하는 법! (CLASS)
import React, { Component, } from 'react';
import './App.css'
class App extends Component {
render() {
return (
<div>
{/*🔥🔥🔥React에서는 이렇게 주석처리 할 슈 있어요*/}
<h1
className="adfasdf" // 근데 또 이렇게는 됨 ㅋㅋㅋ??? >
React!
</h1>
</div>
);
}
}
export default App;
Author And Source
이 문제에 관하여(React 메모장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kich555/React-메모장저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)