jin's Blog

퀴즈 미니 프로젝트를 만들면서React의 여러가지 기능들을 되돌아보는데, 한 가지 계속 반복해서 나오는 건 State 즉 useState에서여러가지의 useState를 만들어서 쓰는 것도 가능하지만 되도록이면하나의 useState에서 여러 데이터를 파생해서 쓰는 것이 React에서 유리하다. 예를들어,  const [userAnswer, setUserAnswers] = useState([]);이런 식으로 유저가 고른 정답들이 저장되는 useState를 만들었을때현재 몇 번 문제 인지, 몇 번 인덱스에 있는지 확인하기 위해서 const [index, setIndex] = useState(0); 이런식으로 만들 수 도 있지만미리 만들어둔 useAnswer에서 유저가 고른 정답 목록의 길이를 가져오면 인덱스를..

그 동안 React 하면서 놓쳤던 중요한 것들을 다시보자!각 함수들 사이에 Props 주고받기 button 관리 ex) handleClicker('components')}>Components 기본적으로 Button 컴포넌트에서 children으로 가운데 "Components"를 받을 수 있고export default function TabButton({ children, onSelected }) { return ( {children} );} -> children은 기본 옵션으로 {children}으로 값을 가져올 수 있음-> onClick 옵션으로 클릭 이벤트를 받아서 onSelected 함수 실행시켜서 보내주고 useState로 해당 버튼 관리하기.c..

React를 사용하는 이유가 뭘까? 기존의 Javascript와 React의 차이점을 알기 React는 더 유연하고 부드럽다 -> 모바일 app처럼그 이유는 리액트는 작성한 코드가 바로 화면에 보여지는게 아니고내부적으로 코드가 수정된 후 보여진다. 그러므로 더 빠르고 유연하게 화면을 띄워주고다양한 라이브러리들이 존재하고 요즘 많이 쓴다! 리액트는 build 프로세스를 사용한다  tip. 변수명을 짓는 방법Must not contain whitespace or special characters (except $ and _)Valid: $userName, age, user_name, data$,...Invalid: %userName, age/, user name,... May contain numbers b..