코딩하는 복서 🥊

1. 들어가며 1) setter 함수에 인자로 어떤 타입이 들어가냐에 대한 내용이다. 2) 그 중에서도 가장 기초적인 number, string, boolean 타입이 들어간 경우를 살펴본다. 2. input 태그를 활용하여 타입별 state 다루기 1) type 프로퍼티로 입력 받을 값의 타입을 정해준다. 2) value 프로퍼티의 값을 state 값으로 연결한다. 3) 값이 변할 때마다 감지하도록 onChange 이벤트 핸들러를 넣고 setter 함수로 state 값을 업데이트한다. 📌 Number 타입으로 선언해보면 이런 모양이다. function App() { //Number const [num, setNum] = useState(0); return ( 숫자 setNum(e.target.value..

1. state 란? 1) 컴포넌트가 관리하는 상태 값 2) 상태 값이 변하면 component의 UI를 변경 즉, prop 처럼 값이 변하면 component 함수를 다시 실행하여 새로운 return 값 생성 2. prop vs useState 1) prop은 component를 사용하는 외부자를 위한 데이터이고 2) state는 component를 만드는 내부자를 위한 데이터이다. 3. 사용법 1) useState는 배열을 반환하는데 0번째 index는 '값', 1번째 index는 '함수'를 반환 2) '구조분해할당'으로 useState를 선언 * const [mode, setMode] = useState('초기값'); * 여기서 mode가 '값' * setMode('값')는 함수 // 여기서 값을 ..

0. 리액트는 무엇인가? 1) 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 2) 페이스북에서 제작 3) 사용자 인터페이스 즉, 프론트엔드 개발을 위한 프레임 워크 *자세한 내용은 친절한 공식 사이트에서 확인 https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 📌 들어가기 전, 설치하고 자시고 하는 모든 과정이 다 귀찮고 바로 시작하고 싶다면? 1) 스택블리츠에서 바로 시작! (스택블리츠 전화 줘 ^^) https://stackblitz.com/edit/react-78pvtb?file=sr..