JSX
CLASS
사용자 정의 컴포넌트의 이름의 첫 글자는 대문자
HTML 태그 사이에 적을 내용이 없으면 <Hi />
로 적음
import할 때 js파일은 확장자를 적어주지 않아도 됨
컴포넌트 함수는 언제나 true
ModalIsopen ? <modal /> : null
ModalIsOpen && <Modal />
<Modal />
) 반환리액트의 컴포넌트 함수는 반드시 동기적. JSX 반환.
...
: 값만 가져오기 (JS 연산자)
객체를 JSX element로 변환하면 출력 가능 (map 함수 이용)
Hello 컴포넌트 작성법
1)
const Hello = function () {
return <p>Hello</p>;
};
export default Hello;
2) arrow
3)
export default const Hello = function () {
return <p>Hello</p>;
}
사용법
import Hello from './component/Hello';
react-router-dom v6
*
붙임.module.css
스타일을 특정 컴포넌트에 한정
import classes from './MainNavigation.module.css';
<JSX>
<header className={classes.header}>
<CSS>
.header {}
REST API : URL 주소와 메소드로 CRUD 요청
매개변수
객체
<Todo text = 'Learn React' />
{}
: 자바스크립트로 취급하라고 알려주는 것 (동적 표현식)
연산 가능
단 block문 작성 불가능 (if)
이벤트는 태그 안에 적어줌
<button className='btn' onClick>
이벤트 속성의 값은 함수를 적어줌
함수 뒤에 ()를 붙이면 X. 적게 되면 검증을 하는 도중에 바로 실행해버림.
컴포넌트는 모두 자바스크립트 부분이나, HTML 부분은 겉으로 그렇게 보이지 않는 것. return() 위의 부분은 표준 자바스크립트로 작성한다. function을 정의하는 부분.
return ()안에서는 {props.text}로 적으나 함수 정의 부분에서는 단지 props.text로만 적어도 됨.
function Hello(props) {
return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}
function Hello({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
}
🪄 event props
내장된 컴포넌트 <button>
같은 것들은 이벤트 onclick에 사용자 정의함수를 지정할 수 있으나, 사용자가 직접 만든 컴포넌트 <Modal />
,<Backdrops />
는 onclick에 사용자 정의 함수를 주면, 주어진 props( {closeModalHandler}
)가 뭔지 모름. 그래서 컴포넌트 함수인 <modal />
로 가서 함수를 적어줘야 한다. 사용자가 직접 만든 컴포넌트는 100% 하나하나 직접 만들어야 함.
{ modalIsOpen && <Backdrop onCancel={closeModalHandler}/> }
<Backdrop.js>
function Backdrop (props) {
return <div className="backdrop" onClick={props.onCancel}/>;
}
애플리케이션에서 사용하고자 하는 상태 등록 가능. 상태 별 결과물 정의.
화면에 보이는 내용을 다이나믹하게 바꿀 때 유용
useState();
: 사용자 정의 함수가 아니라, 컴포넌트 함수에 바로 써줌. () 안에는 초기값을 적어줌.
항상 배열을 리턴. 이 배열에는 두 가지 element가 있다. 이 배열을 상수에 저장하거나, de-structing 가능.
const [ modalIsOpen, setModalIsOpen ] = useState();
첫 번째 요소 : 현재 상태를 나타내는 함수
두 번째 요소 : 상태 업데이트 함수
import { BrowserRouter } from 'react-router-dom';
import {Route} from 'react-router-dom';
<a>
를 이용해 링크를 주면 서버로 계속 요청을 하고 다른 페이지로 넘어가야 되기 때문에 비효율적.react-router-dom의 <Link>
를 이용하자<Link>
에 이동할 경로를 설정제출 했을 때 리로드 여부
<form onSubmit>
기본 event(onClick, onSubmit)를 자동으로 캐치함. 이를 위해 리액트는 함수로 자동으로 event를 넘김. 그래서 eventhandler 함수의 인자에 event를 적는 것.
event.preventDefault();
<form>
태그로 감싸져 있는 submit 버튼을 누를 시 자동으로 새로고침을 함useRef();
fetch();
useNavigate();
.json();
useEffect();
부수효과
useEffect