20220128_TIL(1) : 스프레드 연산자

구글링을 한번씩 하다보면 자주보이는 [...answer] 이런 코드가 있어서 봐도 낯설었는데 스프레드 연산자였다.. 코드를 편하게 합칠 수 있는 연산자여서 코드를 줄이는 데에 큰 역할을 할 것 같다.

🧚🏼‍♀️ 스프레드 연산자 활용

✔️ 배열 합치기

const aaa = [1,2,3]
const bbb = [4,5,6]

const ccc = [...aaa,...bbb] //결과 : [1,2,3,4,5,6]

.concat 함수를 쓰거나 .slice를 사용하지않고 간단하게 배열을 합칠 수 있다. 무한 스크롤링에서도 활용 가능

✔️ 코드 리펙토링

모든 이벤트핸들러 함수가 동일한 상황이기때문에 하나의 함수로 코드 리펙토링이 가능하다. 리펙토링이 익숙해지기까지 과정을 코드로 반복해서 작성해보자.

//새로운 state 변수(정리될 3개의 변수가 들어갈 객체로 초기값) 생성
const [inputs,setInputs] = useState({
 	writer : "",
	title : "",
	contents : ""
})

//각 함수의 setState값 setinput으로 통일
const onChangeMyWriter = (event) => {
	setInputs({
    	writer : event.target.value,
      	title : inputs.title, // 객체의 값 : " 변수.키 "
    	contents : inputs.contents
    })
}

//객체에서 '키'가 중복 할당되면 기존 할당된 값을 덮어쓴다
// => 3가지 함수가 모두 동일하기때문에 ...inputs로 스프레드 가능
const onChangeMyWriter = (event) => {
	setInputs({
    	...inputs
      	writer : event.target.value,
    })
}

//각 함수의 '키(writer,title,contents)'를 클릭이벤트가
//발생할 태그의 아이디로 지정하면 함수가 발생될 때 id값이 이벤트로 저장된다.
const onChangeInputs = (event) => {
    setInputs({
    ...inputs,
    [event.target.id]: event.target.value,
  // ⭐️ event.target.id 자체가 객체의 '키'이기 때문에 괄호로 표현
    });
 };

연결된 버튼이나 input 태그에 하나의 함수를 바인더해주면 완료.

👩🏻‍💻 오늘의 TIL ...
스프레드 연산자 - 코드 리펙토링으로 코드 길이를 훨씬 줄일 수 있다는 장점.
지금 코드 200줄 넘는 파일이 많다. 설 연휴 내로 파일 나누기 / 리펙토링으로 코드 정리 확실히 하도록 하자.