React Style
1) tailwind 처럼 클래스 방식 (className)
2) Styled Component
3) Style props
이벤트 핸들러
이벤트 핸들러 ex) onMouseOver, onClick등을 설정할 때, 함수명을 handler + 이름 형식으로 짓는다. (리액트의 관례)
useState
사용방법
const counterState = React.useState(1); // 초기 값 1로 설정
const counter = counterState[0]; // 실질적인 count값은 0번째 인자
const setCounter = counterState[1]; // count를 조작하는 것은 1번째 인자작동
console.log("카운터", counter); // 초기 값 1이 바로 출력
function handleFormSubmit(event) { // 함수를 실행하면 100으로 출력
event.preventDefault();
console.log("폼 전송됨");
setCounter(100);
}간결한 사용
const [counter, setCounter] = React.useState(1);리스트 다루기
function Favorite() {
const CAT1 =
"https://cataas.com/cat/60b73094e04e18001194a309/says/react";
const CAT2 =
"https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
const CAT3 =
"https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";
const cats = [CAT1, CAT2];
return (
<ul className="favorites">
{cats.map(cat => <CatItem img={cat} key={cat} />)}
</ul>
);
}key값을 설정해줘야한다. 실무에서는 id값과 같이 오는 것이 일반적이니 id값을 key값으로 설정하면 될 것이다.
JS: 전개 연산자
setFavorites([...favorites, CAT3])Naming Convention
만약에 handle 함수를 props로 전달했을 때는 앞에 접두어 on을 붙여서 전달한다. 즉,
<MainCard
img={image}
alt="cat-image"
width="300"
onHeartClick={handleHeartClick}
/>위와 같이 전달한다.
LocalStorage
const jsonLocalStorage = {
setItem: (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
},
getItem: (key) => {
return JSON.parse(localStorage.getItem(key));
},
};그냥 localStorage로 저장하게 되면 모든 값이 문자열로 저장된다. json 형식으로 저장하고 parsing 해야 우리가 원하는 타입을 사용할 수 있다.
JSX
JavaScript + XML
JavaScript에 HTML태그를 끼얹은 문법
- HTML 태그 안에선 중괄호({ })를 사용해서 JS를 쓸 수 있다.
const count = 1;
const title = <h1>{count}번째 고양이</h1>위 title 변수에 담은 h1태그는 리액트 엘리먼트라고 부른다.
Babel
최신 문법을 브라우저가 이해할 수 있는 JavaScript로 통역
- 브라우저는 JSX를 이해하지 못한다.
- Babel이라는 통역사로 JSX -> JavaScript로 변환
컴포넌트
여기저기 재사용 가능한 UI 코드 조각
보통 props라는 변수로 값을 전달 받는다. (properties의 약자)
이벤트
사용자 이벤트(클릭, 스크롤 등)다루기
- 일반 자바스크립트 이벤트 목록과 동일하지만 중간을 대문자로 쓰면 된다.
- onclick -> onClick
상태
컴포넌트 안에서 자유롭게 변경할 값이 필요할 때
- useState 함수로 상태를 추가할 수 있다.
- 컴포넌트 안에서 만들 수 있다.
- const [상태명, 상태변경함수명] = React.useState(초기값)
배열
map함수를 이용하여 배열 사용
폼
사용자가 입력 값을 직접 다루기 위해 value를 상태로 관리한다.
로컬 스토리지
리액트 문법 X, 브라우저 기능이다.
브라우저에 데이터를 저장한다.
간단한 데이터 저장이 필요할 때, 사용.. 다만 7일까지 저장가능하다.
useEffect
React 컴포넌트 안에 있는 코드들은 기본적으로 UI가 업데이트 될 때마다 계속 불린다.
어떤 값이 변경될 때만 부르고 싶다면 useEffect를 사용한다.
React.useEffect(() => {
console.log("헬로");
}, [counter]); // counter의 값이 바뀔 때, console.log("헬로"); 실행