$$config title: 리액트기본 keywords: - JSX - 중괄호 - const - event $$ # 리액트기본 ## ?state에 대해서 알아보자 ```js function App(){ const [index, setIndex] = React.useState("index의 초기값") const eventChangeFunc = (event) => { setIndex(event.target.value); // index를 select 태그의 이벤트로 변환해준다. }; return (

바꾸는 리액트 함수를 만들어보자!

// 중괄호로 HTML안에서 JS 사용하기 (JSX) {index === "A렌더링" ? : null} {index === "B렌더링" ? : null} ``` - 각 컴포넌트는 function A(){ 구현된 기능} 이다. 컴포넌트는 `return

;` 처럼 jsx를 반환한다. ## ?? 리액트가 재실행 되는 시점?

## ? 왜 버튼의 스타일 태그 바꿔주는데 중괄호를 두번 쓰나요? ```js - 만약 4번에서 function Btn({버튼인자1}) 라고 써줄 수도 있음. 그러면 Btn 함수 컴포넌트의 리턴 안에는 만 들어감 - 이제 함수 컴포넌트 리턴안의 버튼인자1에 들어오는 값 에 따라 버튼이 표현하는 텍스트가 바뀜 7. 스타일 안에서 받아온 값에 따른 변동도 줄 수 있음. ``` ![그림](https://i.imgur.com/QN49FGE.png) ## prop 작동 경로 ![그림](https://i.imgur.com/BNFlVof.png) ## 리액트 메모 ```js 원래 어떤 컴포넌트 리턴 함수는 변화(setState등)이 있으면 다시 그려진다. 어떤 컴포넌트가 다시 그려지길 원치 않는다면 const ChangeOrNochangeBtn = React.memo(버튼리턴함수명) 리액트 메모를 사용한다. 리액트 메모는 컴포넌트를 리턴하는 함수명을 담고 있다. A함수라고 명명. 이를 거치면 B컴포넌트 내의 React.useState의 setState가 실행될 때, B컴포넌트를 리턴하는 A함수는 B컴포넌트 중 변함이 없는 것을 렌더링을 다시 하지 않는다. ``` ## propTypes를 통해 형에 대한 명시를 해줄 수 있다 ### https://unpkg.com/react@17.0.2/umd/react.development.js ![사진](https://i.imgur.com/oKJ5k7K.png) ![사진](https://i.imgur.com/NCRUK0e.png) - isrequire로 기본값의 필수여부를 조건을 걸어줄 수 있다. ![사진](https://i.imgur.com/HHDGUf1.png) ## ?useEffect . 한번만 실행되는 코드 ![사진](https://i.imgur.com/4CZvaMO.png) ``` UseEffect 에 대해 알아보자 두개의 인자를 가지는 것 첫번째는 우리가 한번만 실행하고자 하는 코드 두번째는 나중에 얘기 const iRunOnlyOnce = () => { // 한번만 실행되야 하는 코드가 여기 // } useEffect(iRunOnlyOnce , [ ]) useEffect( () => { //실행될 것// }, [ ]) ... 어떠한 useState가 있다. const [key, setKey] = useState("") key가 바뀔 때만 실행되는 useEffect를 만들어보자 useEffect( () => { keyword ); }, [keyword]); ``` ![사진](https://i.imgur.com/1vu1Gp6.png) ### ?useEffect의 '클린업 펑션'

## ReactCreateApp 시작 ``` nodejs 설치 후 명령 프롬포트 # node -v # npx # npx create-react-app my-app ``` ![사진](https://i.imgur.com/7VoLHrT.png) ![사진](https://i.imgur.com/f96Uanj.png) ## ?자바스크립트 map과 리액트 콤보

## ?리액트, array, map, input, state, onsubmit, onchange ```js import {useState} from "react" function App() { const [toDo, setToDo] = useState("") const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); // a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. if (toDo === "") { return; } setToDos(currentArray => [ toDo, ...currentArray ]) setToDo(""); }; console.log(toDos); return (

my To Dos ({toDos.length})

{item}

); } export default App; ``` # ? 영화 어플 만들기 ## ? 컴포넌트와 스테이트

## ? useEffect

## ? fetch 와 async / await

## ? map의 사용