2023. 2. 7. 23:51ㆍProgramming/React
이어서 아래는 나머지 글 리스트들도 작성하고 글 제목을 state로 바인딩한 것이다.

코드를 짜다가 보면 터미널 부분에 warning 이라는 노란색 글짜들이 뜨는데, 에러는 아니고 eslint가 잡아주는 문법 체크사항이다. 잘못된 코딩 관습을 바로 잡아주는 라이브러리인데, 해당 warning이 보기싫으면 App.js 안에 다음과 같이 작성하면 된다.
/* eslint-disable */
다음으로 할 것은 리스트 안에 좋아요 버튼을 만들고 좋아요를 누르면 카운트가 올라가도록 만들어 보자.

line 17에 HTML UI를 만든 상황이고, 따봉충 이모티콘은 크롬 주소창 우클릭 그림 이모티콘을 복붙한거다.
리액트니 중괄호로 onClick 이벤트를 해준다 하지만 중괄호 안에는 수식이 들어갈 수 없고 무조건 함수여야 한다. 함수 기능 개발을 해 보자.
기존 JS에서는
function 어쩌구(){}
addEventListener('click', function(){})
//es6에서는
addEventListener('click', ()=>{})
첫번째 줄이나 두번째 줄처럼 함수를 정의 했을텐데.. 리액트로 넘어와서 es6문법으로는 네번째 줄과 같은 의미로 쓰인다..
onClick = {클릭될 때 실행할 함수}
onClick ={()=>{실행할 내용}}
Q.따봉을 누를때마다 콘솔창에 1이 뜨게하려면?

line 17처럼 해 주면된다. 그냥 JS와 큰 차이점은 없지만 수식말고 오로지 함수만 가능하다는 차이점이 존재한다.
이제 line 17에 따봉을 누를 때 마다 h3태그에 적힌 0이라는 숫자가 올라가도록 만들어 보자!.. 뭔가 저기는 쌩으로 0을 박으면 안될거같은 느낌적인 느낌이 들지않남?
0이라는 숫자는 항상 바뀌는 숫자이기 때문에 state로 넣는 것이 좋은 방법이다. 다음과 같이 코드를 작성해 보자.

우선 state를 사용 할 때는 line 2번처럼 선언을 해주어야 한다는걸 기억해야함!
line 9번에 버튼 숫자로 삽입될 state를 선언 해 주었다. 그러고 line 18번에 해당 state를 중괄호 안에 삽입해 주면 끝 그러면 이제 클릭 시에 함수를 이용해 따봉 +1이 실행 되도록 했다. 과연 따봉을 누르면.. 숫자가 올라갈까??
아쉽게도.. 올라 가지 않는다.. 앞선 장에서 말했듯이 선언 된 state는 그냥 변경을 할 수가 없다. 변경 할 수 있는 방법이 따로 있는데.. state를 선언할때 array2로 만들어 진다했다. 그리고 해당 초기 값을 변경할 수 있는 함수가 만들어 진다고 했다.
line 9번에 선언 한 변수명 따봉변경을 이용하면 된다. 다시한번 올바르게 코드를 수정해 보자.
<h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1) } }>👍</span> {따봉} </h3>
이런식으로 [state, state변경함수] 변경함수를 이용해야 재렌더링이 일어나고, state문법의 올바른 사용 이다.
따봉변경(따봉을대체할데이터);
이런 식으로 넣어 주면 해당 값으로 변경이 된다. 여기까지가 버튼에 이벤트 리스너를 장착하는 방법을 알아보았다.

다음으로 블로그에 빨간원 그린곳에 버튼을 생성하고 버튼을 누르면 '남자코트추천' 이라는 블로그의 첫 글을 '여자코트추천' 으로 변경하는 버튼 기능개발을 해보자.

line 18번에 버튼 태그를 사용해서 버튼을 만들어 주고 그안에 onClick이벤트를 열어 주었다. onClick중괄호 안에는 앞서 배웠듯이
<button onClick={ ()=>{ 기능개발 } } >버튼</button>
이런식으로 코딩을 해 줄수도 있지만, 이렇게 하면 해당 태그부분이 좀 길어질꺼 같으니 바깥에다가 함수를 작성 해 보도록 하겠다~..
<button onClick={ 제목바꾸기 } >버튼</button>
제목바꾸기라는 함수를 만들 것이다. 여기서 주의할 점 하나는 onClick={}안에 함수를 넣는다고 해서 제목바꾸기() 이런식으로 함수를 추가해 버린다면 클릭하기도 전에 바로 함수가 실행 될 것이다. 주의 하도록 한다!. 제목바꾸기 함수를 완성해보자.
function 제목바꾸기(){
//글제목[0] = 1; 반영안됌
글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬독학']); // <= 아예 state를 대체해주는 함수
}
직접 state를 수정 할 수 없다고 앞서 언급했듯이. 2번째 줄은 실행이 안된다.
3번째 줄처럼 기존 데이터가 3개의 array로 이루어져 있었으니.. 동일하게 데이터를 넣어주고 제일 앞부분 데이터만 바꿔주면 된다. 그러면 기능개발이 끝난다.. 근데뭔가 개발자스러움이 없잖아.. 만약에 array가 존내게 길면 어떻게할래;
좀더 개발자스러운 코딩을 해 보자.. ㅇㅇ;; 세개를 다 하드코딩 할 필요없이 첫번째 인덱스만 조정하는 코딩을 해보자.
function 제목바꾸기(){
// var newArray = 글제목[0] = 11231231; 요렇게 못바꿈..
var newArray = 글제목;
newArray[0] = '여자코트 추천';
글제목변경( newArray );
}
두번째 줄처럼 저런식으로 바로 글제목 때려오면 못바꾼다고 몇번을 앞서 말했다.. 기억!
세 번째 줄처럼 아예 해당 state를 새로운 변수에 넣어준다.
네 번째 줄처럼 카피한 인덱스 값을 변경해 주고, 글제목변경함수에 0번째 인덱스가 수정된 값이 들어가도록 해준다.. 이러면 실행이 될까?? !..
근데 실행이 안된다.. 왤까?... 왜 안바뀔까..?
위에 작성한 코드의 형식은 맞는데.. ??.. 복사를 잘못한것이다.
지금 세 번째 줄의 뜻은 글제목 변수와 newArray의 변수가 동일한 값을 공유하는 것이다. 이것의 자세한 내용은 reference data type의 특징이기 때문에 따로 검색을 해보자. 그러면 도대체 deep copy는 어떻게 하는건데. 다음과 같이 작성하자.
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자코트 추천';
글제목변경( newArray );
}
[...변수명] 이런식으로 선언을 해주면 된다. ...는 Spread Operator라는 ES6의 신 문법인데 그냥 중괄호, 대괄호 다 제거해 주세요.. 라는 뜻이다. object또한 해당 방식으로 deep copy가 가능하다. 위처럼 코드를 짜면 실행이 된다..! 적용된 코드 에디터를 확인 해보자.

line 23번에 해당 버튼 line 12~ 16까지가 해당 함수이다.
<Array, Object state데이터 수정 방법 정리 하자면
-일단 변경함수 써야함
-변경함수(대체할데이터)
-state는 직접 건들지 않는다.
-deep copy 해서 그걸 건든다.
이게 이해가 안되면 그냥 형식을 외우면 된다.
Q. 버튼을 누르면 제목들을 글자순 정렬로 하는 방법을 생각해보자.
여기까지 다음 글로 넘어가자.
'Programming > React' 카테고리의 다른 글
코딩애플 - 무작정 React 찍먹하기 -4- (글 상세페이지 UI만들기 or Component로 HTML 깔끔하게 줄이기) (0) | 2023.02.14 |
---|---|
코딩애플 - 무작정 React 찍먹하기 -2- (JSX 사용법 or state변수 사용) (0) | 2022.10.27 |
코딩애플 - 무작정 React 찍먹하기 -1- (리액트 설치와 셋팅법 2022+ 스타일) (0) | 2022.09.27 |