[220617 / Day 31] useRef, react form

react06-30day

main.jsx

useState 로 누르면 한 탭씩 보이게 할 것

클릭했을 때 num 을 올리도록 함수 호출

클릭이 될 때마다 setNum 함수 호출 그게 0~3까지 왔다갔다해야함 컨텐츠가 0,1,2,3 까지 있으니까

num 이 0보다 작거나 같으면 3, 아니면 -1 : 순환하도록, num 이

li 개수만큼의 배열 만들어서 쓰기 :

const listData = ['content01', 'content02', 'content03', 'content04'];

listData 가 배열이 4개니까 map 으로 돌리면 총 4개 li 가 생기는 것

'view_01 on' 대신 다른 이름 쓸 것

// i랑 num이 일치할 때만 on, 아니면 없도록 설정

        const on = (i === num ? ' on' : '');

 

옆으로 슬라이드 하기

- 4에서 옆으로 하면 1로 가는거 왼쪽이 아니라 오른쪽으로:

css 로 애니메이션 해놓고

listData 에 앞에 한장 더 붙임

다섯장이 돌아갈 수 있게 width: 500%;

- 1에서 왼쪽으로 하면 4로 가는거 어색:

 

main.css

css 에서 변수값 쓰기

-  --변수이름 : 속성값; 이렇게 하면 이용가능, 해당 요소 안에서만 사용 가능, 이름은 마음대로, ex) --list-size: 1200px;

-  사용할 때는 width: var(--list-size); 이런 식으로

 

useRef

돔에 직접 접근할 때 쓰는 훅, 스크롤이나 폼, 비디오 제어할 때 우회할 방법 없어 도큐먼트 직접선택할 수 없다 그럴 때 쓰는 ref, 폼 선택해올 때 많이 사용, 하지만 지금은 메모리 절약할 방법으로 씀

지금은 스테이트àref 으로 바꿀 것

스테이트는 값이 변경될 때 다시 랜더링 값이 바뀌면 새로 업데이트되는 값을 넣는 것이기 때문에 재할당하기 위해 컴포넌트를 재랜더링 다시 불러짐 다시 랜더링을 많이 하게 되면 느려지게 됨 스테이트가 많아질수록 느려짐 그래서 그걸 막아주기 위해 ref 사용할 것, à 값이 바뀌면 해당하는 변수에 값을 재할당하기(업데이트)위해 컴포넌트를 다시 랜더링한다.

ref 는 값이 바뀌더라도 리랜더링이 되지 않는다. 한번 랜더링되면 그 값을 가지고 있음

레퍼런스의 약자 인풋이나 직접 선택해야하는 요소를 담는데 쿼리셀렉터 용도로 많이 씀 불변의 값이면 써도 됨 메모리 낭비가 안됨

 

form.jsx

ref={ writer } à writer 라는 객체 형태의 변수가 대입, writer 라는 변수에 돔이 참고가 된 상태

console.log(writer) à Object {current: input } 나오는데 writer 는 객체 타입이기 때문에 object 라고 뜨는거고 그 키 값은 current, value 즉 프로퍼티는 input

writer.current à input 이라는 요소가 불러지는 것

따라서 그냥 writer 만 불러오면 냅다 object 만 불러지는 것

{current: undefined} à 이렇게 나오는 이유는 input 에 value 값을 넣지 않아서, input 은 입력창이기 때문에 value 값을 따로 넣어야 함 그러나 value='홍길동' 이라고 따로 넣어놓으면 에러가 뜸 그 이유가 온채인지라는 함수가 있으면 상관없는데 온채인지가 없으면 에러가 뜸, 디폴트밸류, 리드온리가 없으면 에러가 뜸, 밸류가 있으면 안뜨기 때문에 상관은 없음

 

writer: '',

        content: '',

        grade: 50

à 핸들러 함수는 얘를 참고해서 할거임, ...state

 

 

 

 

* 상세페이지 과제

1. 계획

2. 실행

3. 오류

4. 해결

5. 미해결

상세페이지까지 있으면 무거워지기 때문에 리스트 데이터랑 상세페이지 데이터 따로해서 id 나 index 로 일치 시키기 목요일까지