[react] ESlint - 'React' is defined but never used no-unused-vars / input 여러개 상태관리 - 객체 상태 관리 / useMemo / useCallback / useRef / useEffect / useState

 

 

 

 

https://muna76.tistory.com/199

[환경설정] ESlint + prettier

 

기존에 작업 하던 환경설정  - eslint , prettier 이 적용 된 채로 react 문서를 따라 실습을 진행했다.

그런데 여기서 하나 문제가 생겼다.

 

React는 컴포넌트를 만들 때 꼭

import React from 'react';

를 해줘야 하는데, 이때 실제로 React라는 변수가 쓰이지는 않는다.

 

ESlint가 이부분을 오류라고 감지해서 , npm run start를 실행하면

is defined but never used같은 에러가 발생한다.

문제는

오류 때문에 브라우저에 화면이 띄워지지 않는것이다..

 

이 오류를 먼저 해결하고자 한다.

 

 

 

1. rules 부분 주석처리 하기

-

modules.exports에 

"extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ]

가 추가 되어있는 상태로,

 

기존에 개별 설정으로 넣어놨었던 rules의 react 설정을 모두 주석처리 해보았다.

그랬더니 웬걸 바로 해결 되었다..

(사실 처음에 한번 그렇게 했을땐 안됐는데 다시 이것저것 만지다가 다시 주석후 실행해보니 되었음....)

 

 

 

2. 처음에 오류난 부분을 구글링하며 얻은 추가적인 방법

-

에러나는 줄 옆에 다음과 같은 주석을 단다.

// eslint-disable-line no-unused-vars

 

기존 상태에서 저것만 추가해주니 실제로 오류가 해결되었다.

 

 

참조:

https://puppypaw.tistory.com/108

eslint] but never used 처리

 

 

 

---

 

 

 

useState

 

 

https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook

 

해당 문서를 따라 공부해봤다.

 

input이 두개 있고, 여기에 각각 이름과 닉네임을 쓰면 밑에 그 이름과 닉네임이 뜨고 , 초기화 버튼을 누르면 모든 값이 사라지는 기능을 만들것이다.

구성은 input 2개, 값이 뿌려지는 div두개 , button 하나.

 

 

 => 여기서 중요한 것은 이때  관리해야 할 input이 두개라고 해서 상태를 두개 만드는 것이 아니라,

하나의 상태에 객체형태로 두개의 값을 저장한다.

const [inputs,setInputs] = useState({ 
	name: '' , 
    nickname: '' 
})

 

 

다음단계는

지정한 input의 값을 어떻게 지정한 div에 뿌려주냐는 것인데

이부분은 input 의 name을 설정해서, 해당 name키를 가진 값을 value로 가지고 오는 식으로 한다.

이때 두번째 포인트

 

상태가 객체인 경우를 수정을 할때는

inputs[name] = value ;

이런 식으로 직접 값을 수정하면 안된다.

 

 

새로운 객체를 만들어서 이 객체에다가 변화를 주고 이것을 상태로 사용해야 한다.

이때 사용하는 것이

 

* spread 연산자

https://muna76.tistory.com/202

[Javascript] spread 연산자 / ...rest

 

따라서

setInputs({
  ...inputs,
  [name]: value
});

 

** 또한

[key]: value 

이부분 문법은

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

useRef

 

1. javascript에서 특정 DOM을 선택하는 역할과 같은 역할을 함. ex) getElementbyId , querySelector

- 특정 DOM에 접근할 때 사용 (외부 라이브러리 사용할때 유용하다)

- 예시로 구현한 기능은 포커스 잡기 : nameInput.current.focus()

 

 

특정 DOM 선택 ( inputSample.js 에 이어서 )

function InputSample(){
	const nameInput = useRef(); // useRef 이용하여 객체 생성

	const onReset =()=>{
    	nameInput.current.focus(); // ref객체의 .current값은 설정한 DOM을 향함.
    }
    
    return(
    	<input
        name="name",
        placeholder="이름",
        onChange={onChange},
        value={name}
        ref={nameInput} // 만들어진 ref객체를 -> 선택하고자 하는 DOM에 ref 값으로 설정
        />
    )
}

 

 

 

2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 수 있음.

다음과 같은 값을 관리할 수 있다

- setTimeout , setInterval 을 통해서 만들어진 id

- 외부 라이브러리를 사용하여 생성된 인스턴스

- scroll 위치

useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다

- 이 값을 수정 할때는 .current 값을 수정, 조회 할때는 .current 값을 조회

 

 

컴포넌트 안의 변수 만들기

 

 

 

 

 

 

 

 

 

 

---