Component 만드는 또 다른 문법 class

Component 만드는 또 다른 문법 class 현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다. 그냥 알아두자 1. class 에 component 이름을 작명한다. 2. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것) 3. render return () 안에 JSX를 작성한다. class Modal extends React.Component { constructor(){ super() } render(){ return ( Class문법이다 ) } } class가 뭔가요? class는 변수, 함수를 보관하는 장소다. extends는 기존 class안에 있던 변수, 함수를 복사해주는 문법이다. React.Com..

2022.11.11

state를 이용하여 input 입력값 가져오기

state와 onChange 함수를 활용해 사용자가 input에 입력 한 값을 바로 가져올 수 있다. react에서는 HTML을 직접 만질 필요가 없다. state를 변경하면 바로 반영되기 때문! function App (){ let [text, setText] = useState(''); return ( { setText(e.target.value) }} /> {text} ) }

2022.11.11

Component 생성, 파일분리

복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. component라고 합니다. 이걸 이용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다. function을 이용해서 함수를 하나 만들어주고 return안에 JSX를 작성한다. 원하는 곳에 을 넣어준다. function App (){ return ( ...생략... // Component ) } function Modal () { return ( 제목 날짜 상세내용 ) } Component 만들 때 주의 점 1. Component 작명 시 첫 글자는 대문자로 한다. 2. 로 써도 되고 로 써도 된다. Co..

2022.11.11

useState()

1. useState() 사용하기 useState를 사용하려면 우선 상단에 useState를 import 해야 한다. useState라고 입력 후 엔터를 치면 상단에 자동으로 import 된다. state는 최상위 컴포넌트에 만드는게 좋다. 부모>자식 간 props 전송은 가능하지만 반대는 안되기 때문이다. import { useState } from 'react'; 2. useState() 문법 import { useState } from 'react'; function App () { let [작명 set작명] = useState('보관할 자료'); return ( 누르면 작명이 바뀐다 { 작명 } ) } export default App; let [작명 set작명] = useState('보관할 자료..

2022.11.11