{}
로 감싸서 사용class 컴포넌트명 extends Component {
render() {
}
}
HelloReact.js
파일 생성하고 불러오기import logo from './logo.svg';
import './App.css';
import HelloReact from './components/HelloReact';
function App() {
return (
<HelloReact/>
);
}
export default App;
import React, { Fragment } from 'react';
const HelloReact = () => {
const name = "리액";
return (
<Fragment>
{name === '리액트' && <h1>리액트입니다.</h1> }
</Fragment>
);
};
export default HelloReact;
import React, { Fragment } from 'react';
const HelloReact = () => {
const name = "리액트";
const style = {
backgroundColor: 'black',
color: 'white',
fontSize: '48px',
fontWeight: 'bold',
padding: 16
}
return (
<Fragment>
{name === '리액트' && <h1 style={style}>리액트입니다.</h1> }
</Fragment>
);
};
export default HelloReact;
.css
.react {
background-color: aqua;
color: black;
font-size: 48px;
font-weight: bold;
padding: 16px;
}
.js
import React, { Fragment } from 'react';
import '../App.css';
const HelloReact = () => {
const name = "리액트";
return (
<Fragment>
{name === '리액트' && <h1 className='react'>리액트입니다.</h1> }
</Fragment>
);
};
export default HelloReact;
App.js
import PropsOfComponent from './components/PropsOfComponent';
function App() {
return (
<PropsOfComponent name='React'/>
);
}
export default App;
PropsOfComponent.js
import React from 'react';
const PropsOfComponent = (props) => {
return (
<div>
안녕하세요. 제 이름은 {props.name}입니다.
</div>
);
};
export default PropsOfComponent;
import React from 'react';
const PropsOfComponent = (props) => {
return (
<div>
안녕하세요. 제 이름은 {props.name}입니다.
</div>
);
};
PropsOfComponent.defaultProps = {
name: '기본이름',
};
export default PropsOfComponent;
import React, { useState } from 'react';
const UseState = () => {
const [message, setMassage] = useState('');
const [number, setNumber] = useState(0);
const [color, setColor] = useState('black');
const onEnter = () => setMassage('안녕하세요.');
const onExit = () => setMassage('안녕히 가세요.');
const onIncrease = () => setNumber(number + 1);
const onDecrease = () => setNumber(number - 1);
return (
<div>
<button onClick={onEnter}>입장</button>
<button onClick={onExit}>퇴장</button>
<h1 style={{color}}>{message}</h1>
<button style={{color: 'red'}} onClick={() => setColor('red')}>빨간색</button>
<button style={{color: 'green'}} onClick={() => setColor('green')}>초록색</button>
<button style={{color: 'blue'}} onClick={() => setColor('blue')}>파란색</button>
<br />
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
<h1>{number}</h1>
</div>
);
};
export default UseState;
import React from "react";
const EventPractice = () => {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
onChange={(e) => {
console.log(e.target.value);
}}
/>
</div>
);
};
export default EventPractice;
import React, { useState } from "react";
const EventPractice = () => {
const [message, setMessage] = useState('');
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
value={message}
placeholder="아무거나 입력하세요"
onChange={(e) => {
setMessage(e.target.value)
}}
/>
</div>
);
};
export default EventPractice;
import React, { useState } from "react";
const EventPractice = () => {
const [message, setMessage] = useState("");
const handleChange = (e) => {
setMessage(e.target.value);
};
const handleClick = () => {
alert(message);
setMessage("");
};
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
onChange={handleChange}
value={message}
/>
<button onClick={handleClick}>확인</button>
</div>
);
};
export default EventPractice;
import React, { useRef, useState } from "react";
const UseRef = () => {
const [inputs, setInputs] = useState({
name: "",
nickname: "",
});
const nameInput = useRef();
const { name, nickname } = inputs;
const handleChange = (e) => {
const { name, value } = e.target;
const nextInput = {
...inputs,
[name]: value,
};
setInputs(nextInput);
};
const handleClick = () => {
alert(name + ": " + nickname);
setInputs({
name: "",
nickname: "",
});
console.log(nameInput);
nameInput.current.focus();
};
return (
<div>
<input
type="text"
name="name"
placeholder="이름"
onChange={handleChange}
value={name}
ref={nameInput}
/>
<input
type="text"
name="nickname"
placeholder="별명"
onChange={handleChange}
value={nickname}
/>
<button onClick={handleClick}>확인</button>
</div>
);
};
export default UseRef;
import React, { useState } from "react";
const ArrayRendering = () => {
const [names, setNames] = useState([
{ id: 1, text: "HTML" },
{ id: 2, text: "CSS" },
{ id: 3, text: "JQuery" },
{ id: 4, text: "React" },
]);
const [inputText, setInputText] = useState("");
const [nextId, setNextId] = useState(5);
// const names = ["HTML", "CSS", "JQuery", "React"];
const handleChange = (e) => {
setInputText(e.target.value);
};
const handleClick = () => {
const nextNames = names.concat({
id: nextId,
text: inputText,
});
setNextId(nextId + 1);
setNames(nextNames);
setInputText("");
};
const onRemove = (id) => {
// filter함수 사용하여 제거 기능 구현
const nextNames = names.filter((name) => name.id !== id);
setNames(nextNames);
};
// 배열의 map 함수를 이용하여 새로운 배열 만들기
const nameList = names.map((name) => (
<li onDoubleClick={() => onRemove(name.id)} key={name.id}>
{name.text}
</li>
));
return (
<div>
<input type="text" onChange={handleChange} value={inputText} />
<button onClick={handleClick}>추가</button>
<ul>{nameList}</ul>
</div>
);
};
export default ArrayRendering;
input창에 입력하고 추가 버튼 누르면 아래 리스트에 추가되고,
리스트를 더블클릭하면 해당 아이템 제거됨
정말 당최 무슨말인지 모르겠네,,,
강사님 따라 적기는 하지만 함수 하나하나 정확하게 어떻게 구현되는 건지 파악이 제대로 안되어있음...
JS 강의 설렁설렁 들을 탓이지뭐....