FE

[REACT] Event

{console.log(e.target.value);}}> e.target.value : 이벤트 발생할 때, 앞으로 변할 인풋 값 import { useState } from "react" const EventPrac = () => { const [username, setUsername] = useState(''); const [messeage, setMessage] = useState(''); const onChangeUser = event => setUsername(event.target.value); const onChangeMes = event => setMessage(event.target.value); const onClick = () => { alert(username + ':' + mess..

[REACT] map / key

import { useState } from "react"; function App() { const [toDo, setTodo] = useState(""); const onChange = (event) => setTodo(event.target.value); // console.log(toDo); const onSubmit = (event) => { event.preventDefault(); console.log(toDo); }; return ( Add To Do ); } export default App; *event.preventDefault 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정. const [toDos, setTodo..

[REACT] component / state / useEffect

import Button from"./Button"; import styles from "./App.module.css" import {useState} from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev+1); return ( {counter} click me ); } export default App; state 사용 후 value 받아오고, value 수정을 위해 function을 받아옴. previous state를 받아 +1 한 값을 return하는 function 생성한 후에 그 값을 h1을 통해 보여줌 그리고 button 태그에 onC..

[REACT] create-react-app

Button.js button 태그에 스타일 지정하는 대신, Button.module.css를 Button.js에 styles로 import하고, styles의 btn을 styles.btn으로 사용 리액트는 자동으로 랜덤한 class name을 지정해준다. 우리가 고민하지 않아도 됨. 짱 좋음 이게 App.module.css 파일 쨌든 컴포넌트를 위한 css 따로 만들고 import 가능.! module.css 형식으로 파일 이름 지정하기

[REACT] propTypes

Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes.number, }; function App(){ return( /*사용자가 보게 될 컴포넌트*/ ); } ui에서는 오류를 확인할 수 없지만 propTypes를 사용하면 경고문 확인 가능 우리의 컴포넌트가 어떤 prop을 받는지 검사하는게 가능해짐 fontSize: PropTypes.number.isRequired 컴포넌트가 어떠한 prop들만을 정확히 갖고 렌더 될 것이라는 걸 확실히 하고 싶다면 .isRequired 사용 복붙하는 대신에 어떤 prop들을 받을 수 있는 Btn 컴포넌트 생성 prop들은 우리가 인자를 통해 컴포넌트에 데이터를 보내기 위한 수단. 렌더링 되고 있는 Btn 컴포넌..

[REACT] JSX / setState / converter

*HARD WAY //import ReactJS & ReactDOM Empty div : ReactDOM이 React element를 가져다놓을 곳 ReactDOM에게 span을 root 안에 두라고 명령 -> 먼저 root를 가져와야함 -> 이제 ReactDOM에게 span을 root안에 render JS를 통해 element를 생성하고고 reactJS가 그걸 HTML로 번역 ReactDOM은 container element를 root div안에 render HTML 선택하고 event 등록 하나의 statement로 props에서 event까지 선언 가능 on~ : Eventlistener EASIER WAY ; JSX state ; Rendering function render() 생성하면 더 깔끔..