본문 바로가기

REACT

(187)
[Epic React] useState에서 useReducer로 useState와 useReducer의 차이는 setState 대신 newState를 만드는 함수를 직접 정의할 수 있다는 것이다. const [count,setCount] = useReducer(countReducer,0) function countReducer(prevState,newState){ return newState } const [count,setCount] = useState(0) // 똑같이 동작한다 setCount(count+1) 어 그럼 지금까지 redux 만들면서 작업했던 switch - action 구문은 뭐에요? -> 이전 상태(+타입)에 따라 다음 상태를 만드는 작업을 setState가 아닌 reducer함수에서 구현했을 뿐. -> 리턴하는 것은 동일하게 다음 state다 r..
[Epic React] form 사용하기 Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev kent c dodds 의 Epic React 기초 강의 공부 내용 정리이다. 추가로 적고 넘어갈만한 팁이 있다면 fragment는 flexbox나 grid랑 사용하면 좋다고 한다. jsx를 바벨이 해석할 때. 함수형 컴포넌트와 일반 컴포넌트를 맨 앞글자의 대소문자 여부로 판단하기 때문에 주의해야 함. function UsernameForm({onSubmitUsername}) { const [error,setError] = React.useState(null); const [value,setValue] = React.useState(""); function handleSubmit..
[Epic React] React.createElement, jsx와 바벨 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 수업을 내돈내산하여 공부한 내용이다. props를 어떻게 사용해야 가장 성능에 영향을 안주는지 알아보자. 우리가 리액트로 개발하며 주구장창 만드는 jsx 컴포넌트는 바벨에 의해 컴파일되어 React.createElement로 변환된다. 정말 기본중의 기본인 두 가지 사용법을 보고가자. 첫번째는 2개 파라미터. 두번째에 props 객체 때려넣기 세번째는 prop을 null로 지정하고, 세번째 인자에 children 넣기 ReactDOM.render(div(), document.getElementById('root')) funct..