COCSOS - guitar, computer, etc

컴포넌트 사이에 데이터는 어떻게 전달할까? * 상위 컴포넌트에서 하위 컴포넌트를 전달할때 속성값을 사용하는데, 간단하면 속성값도 되지만, 많은 수를 사용한다면, 깊어지면 중간 컴포넌트는 전달하는게 점점 많아짐. 기계적으로 내려준다 -> 이때 context를 사용하자! //usage import React, {createContext} from 'react'; const UserContext = createContext('초기값'); 데이터를 넣을때는 상위 컴포넌트에서 UserContext.Provider value ="mike" 식으로 추가한다. ex) import React, {createContext} from 'react' export default function App(){ return //....

훅 사용 시 반드시 지킬것 1. 하나의 컴포넌트에서는 같은 순서로 훅을 호출한다. * if, for 문 안에서 훅을 사용하면 안된다. * 함수안에서도 훅을 사용하면 안된다. 항상 호출될수 알 수 없음 * 실수 방지를 위해 return 문 이후에 훅 사용금지 function CompoEx1(){ const [value,setValue] = useState(0); if (value === 0){ const [v1,setV1] = useState(0); }else{ const [v2,setV2] = useState(0); } if (1){ return null } const [] = useState(); return 하지 말랬지! } useState()의 인자는 초기값뿐임. 그래서 여러개 사용시 useStat..

* 리액트에서 제공하는 함수처럼, 내가 훅을 생성할 수 있다. * 훅의 네이밍룰 : useXXX() * 훅 생성을 위한 새 파일 useXXX.js /* 기존 */ export default function Profile({userId}){ const [user, setUser] = useState(null); useEffect(()=>{ getUserApi (useId).then(data => setUser(data)); }, [userId]); return {`name is ${user.name}`} {`age is ${user.age}`} } /* 훅을 사용 */ export default function Profile({userId}){ const user = useUser(userId); retu..