[React] 코딩애플 blog -2

노란색으로 warnings이 뜨는 이유?

eslint 문제!

eslint 란?

잘못된 코딩 관습을 잡아주는 문법 체크사항 라이브러리

이런 warnings을 보기 싫으면 ?

상단에 코드 추가

/* eslint-disable */

문법적 warnings이 사라짐!

 

 

예제 1) 좋아요 버튼 만들기

JSX에서 클릭함수는 이렇게 사용한다.

onClick = {클릭될 때 실행할 함수}
onClick = {()=>{}} //콜백함수로 디자인 가능

1. camelCase를 사용하고
2. { 중괄호 }를 사용하고
3. 중괄호 안에는 함수

따봉을 클릭하면 좋아요 수가 올라가게 만들기!

이때 좋아요는 누르면 바로 변하므로, state에 넣어주는 것이 효율적이다.

이때 함수로 state값을 변경하려고 하니 변경이 되지 않았다. 이유는 state는 그냥 변경하면 안되고, 따봉이랑 같이 만들었던 따봉변경 함수를 사용한다.

따봉변경(대체할 데이터) 

따봉변경 함수를 사용하면 좋아요에 저장된 값이 변경된다.

누를때마다 좋아요가 바뀌는 것을 볼 수 있다. (재렌더링이 일어난다)

 

 

 

예제 2 ) 버튼을 만들고, 버튼을 누르면 첫번째 글 제목이 바뀌게 만들기

(hint . 글제목 변경 함수를 사용할때 들어갈 수 있는 것은 array 이다.)

 

🚨 *함수를 넣을때 onClick = { BtnClick() } 이런식으로 ( ) 괄호를 붙이지 않는다. 이유는 바로 함수가 실행이 되버리기 때문에!*🚨

 

state를 직접 변경하고 싶으면 state의 복사복을 만든다.

 

🚨state는 직접 건들지 말자!🚨

 

그것을 수정해야한다. 이때 deep copy를 해야하는데 그냥 복사하면 큰일나게 된다. 이것은 복사가 아닌 값을 공유하는 것을 의미한다. (reference date type 특징)

따라서 완전히 다른 별개의 복사를 할때는 [...데이터] 이런식으로 복사를 해야한다.(오브젝트고 가능)

 

*deep copy : 서로 독립적인 값을 가지는 복사

let data = [1, 2, 3];
console.log(data) -> [1, 2, 3];
console.log(...data) -> 1 2 3
//이런식으로 배열 내 [중괄호, 대괄호]를 제거하고 값을 출력해주는 문법이다.

*리액트 대 원칙 : immutable data

데이터는 직접 수정이 되어서는 안된다! (개발자들 권장)

 

결과 코드

function 제목바꾸기(){
  let newArray = [...글제목];
  newArray[0] = '여자코트 추천';
  글제목변경( newArray );
}

 

 

예제 3 ) 버튼을 누르면 제목들을 글자순으로 정렬?

hint?

1. 일단 기존의 state 카피본 생성
2. 카피본을 수정사항에 반영
3. 변경함수에 집어넣기

오름차순

function ChangeSort() {
    var newArray = [...글제목];
    newArray.sort();
    글제목변경(newArray);
  }
//sort() 함수는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.

내림차순

function ChangeReverse() {
    var newArray = [...글제목];
    newArray.reverse();
    글제목변경(newArray);
  }