코딩하는 복서 🥊

1. useRef 란? 리액트 Hook으로 State 처럼 값을 저장하는 공간인데 값이 바껴도 랜더링을 안 함 2. 선언 import { useRef } from 'react' const 변수이름 = useRef(초기값) 3. 값(value)는 어떻게 뽑아다 쓰나요? 변수이름.current 를 가져다 쓰면 됨. *ref는 current 라는 프로퍼티에 저장을 함. 4. useRef는 언제 쓰나요? 결론: 변화는 감지해야하지만 그 변화가 랜더링을 발생시키면 안되는 값을 다룰 때 1) 값 변경시 랜더링을 하면 안되거나 랜더링이 필요 없거나 너무 자주 랜더링이 될 것 같은 경우 *state는 값이 변화할 때마다 새로 랜더링 *ref에서 값이 변화해도 랜더링하지 않음. 2) 값을 전 생애주기로 유지시킬 때 (랜..

1. 들어가며 useState 만으로 게시판으로 변형이 가능한 초간단 회원정보 리스트를 만들어 보자. 이 리스트는 회원 등록(Create), 조회(Read), 수정(Update), 삭제(Delete)가 가능하다. 2. 외형 1) 회원 정보를 적는 input 3개와 추가 button이 있고, 회원 생성시, 회원 정보 옆에 수정 button 과 삭제 button 을 만든다. 2) 회원 리스트는 addPerson 함수를 통해 생성된 객체 배열을 map으로 돌며 리스트 생성. function App() { // 성 입력창 상태 const [firstName, setFirstName] = useState(); // 이름 입력창 상태 const [lastName, setLastName] = useState(); /..

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. 커스텀 훅을 왜 만들어? 1) 반복되는 훅이 있다면 매번 작성하는건 비효율적이다. 2) 관리가 용이하다. 만약 수정사항이 있다면 본체 하나만 바꾸면 된다. 2. 어떻게 만들어? 반복되는 걸 묶으면 되는데 상황이 다양하니 아래 예제를 살펴보자. 3. 예제 fetch로 API 호출하고 useEffrct, useState 로 호출된 값의 변화에 따라 새로운 값을 리턴해주는 하나의 모듈를 맹글어봐 1) 예를 들어, fetch()로 url에서 데이터를 받아 json으로 바꾸고 배열로 리턴해주는 반복되는 모듈이 있다고 하자. 2) 여기서 바뀌는 것은 url 뿐이니 url 을 받아 동일한 작업을 수행하는 모듈을 만들어보자. - 커스텀 훅을 따로 관리하도록 폴더를 새로 파도 좋다. - 컴포넌트 만드는 것과 동일한..

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('값')는 함수 // 여기서 값을 ..