티스토리 뷰
[생활코딩 React 강의] #17 ~ #18 : Props와 State에 대한 정리
ESin99 2021. 1. 5. 17:51생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다.
www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
17.1. 컴포넌트 이벤트 만들기
이제 이벤트 프로그래밍을 소비자가 아닌 매체의 생산자의 입장에서 만들어보는 과정!
이전 강의까지는 위의 코드에서 주석처리된 부분처럼 가독성을 위해서 Subject Component를 Component로 사용하지 않고 코드를 다 가져왔었지만, 이제부터는 다시 Component로 이용하기 위해 주석처리된 부분을 모두 지운다.
React에서 이벤트를 설치하고 싶다면?
→ onChangePage를 사용할 것!
이벤트에 함수를 설치해놓으면 a Tag를 클릭할 때 설치한 함수를 실행한다는 의미를 가진다.
onPageChange 함수의 전달은 어떻게 될까? : 바로 Props의 형태로 전달된다!
Subject Component js 파일로 들어가 props의 형태로 함수를 전달받는 코드를 작성하자.
onClick 함수는 a Tag를 클릭했을 때 호출되는 부분이고, 이 때 첫 번째 인자는 이벤트에 대한 정보를 담고있는 변수이다.
부모 클래스(App Component)에서 자식 클래스(Subject Component)에게 값을 전달하기 위해 state를 사용하고 그 state를 props를 통해 전달하는 것
17.2. 컴포넌트 이벤트 만들기
이제는 목록을 클릭(a Tag)했을 때 App Component의 state와 mode를 read로 바꾸고 클릭한 것에 해당하는 content가 본문에 나오게 만들어보자!
(reload되는 것을 막기 위해 a Tag onClick 함수에 대한 preventDefault는 기본적으로 할 것)
목록들이 들어있는 Component TOC를 수정하고
TOC.js도 적절하게 수정하여 목록을 클릭했을 때 이벤트가 나타나게 수정하자!
17.3. 컴포넌트 이벤트 만들기
클릭한 컨텐츠의 내용이 본문에 표시되게 만들어야 한다.
클릭한 컨텐츠가 어떤 컨텐츠인지 알기 위해서는 현재 선택된 Content의 내용을 가져올 것임 (id를 사용하면 된다!)
이전 시간에 수정했던 render함수에서 현재 활성화된 것이 무엇인지 알아보면 된다!
생성자에서 미리 만들어둔 Content의 길이만큼(개수만큼) 순회하면서 현재 선택된 data의 id와 비교하여 그에따른 title과 description을 전달하는 코드이다.
이제 우리가 해야할 일은, TOC.js에서 onChangePage 함수가 호출되었을 때 mode의 값과 함께 selected_contents_id 값을 변경시키면 된다!
TOC.js의 this.props.onChangePage()가 함수가 호출하는 것이므로 이 함수의 인자로 클릭한 목록의 id값을 전달하면 된다!
※ debugger : 실행시켰을 때, debugger 코드까지 실행시키고 알아서 중단시킨다. gdb에서 breakpoint와 같은 역할이라고 보면 된다.
data-id를 적어주었을 때, onClick 이벤트 객체인 e에 어떤 정보가 들어있는 지 console 창을 통해 확인해보자.
e라는 이벤트 객체에는 target이라는 정보가 들어있고 이는 a Tag를 가리킨다.
→ 한 마디로, target이 갖고 있는 a Tag에는 data-id가 들어있으므로 id값에 접속하면 현재 클릭한 목록의 id를 알 수 있다!
data- : 이 접두사로 시작되는 변수는 dataset이라는 특수한 정보를 갖고 있음
여기서 id는 data[i].id 값이므로 이를 전달하면 onChangePage 함수에서 인자로 받아 적절히 내용을 변경할 수 있다.
인자로 전달하고 console 창을 확인해보자.
id가 제대로 전달되고 있음을 알 수 있다.
그렇다면 TOC Component에서 이를 전달해주자.
하지만 이대로 실행시키면 오류가 발생한다.
왜냐하면 selected_content_id로 들어오는 id 즉, 인자로 넘어오는 id는 문자이고 우리가 정해놓은 content id는 숫자라서 type이 맞지 않았기에 생긴 오류!
→ 숫자로 바꿔주는 명령어를 사용해야 한다. (이것은 자바스크립트의 단순한 지식 정도)
이제 클릭 시 목록의 id값을 잘 전달하는 것을 알 수 있다.
물론, data-를 이용하지 않고 다른 방식을 이용하여서 id를 전달할 수 있다.
bind(this, data[i].id)
bind에 다음 인자를 넣어주면 onClick 이벤트에서 e라는 이벤트 객체뿐만 아니라 bind에 넣어진 인자도 전달해준다.
이때, 원래 이벤트 객체말고 onClick 이벤트에 전달되는 것들이 x, y, z라면 bind함수에 들어간 인자때문에
data[i].id, x, y, z 식으로 한 칸씩 밀리게 된다.
※ 유튜브 댓글에서 bind(this, data[i].id, 100)으로 전달하면 function에 인자를 넣을 때 (num, id, e)로 넣어야하지 않냐는 말이 있었다. 실제로 강의에서는 bind에 2가지의 인자를 추가로 전달하면 function에 인자를 넣을 때 (id, num, e)로 전달한다고 말씀하셨다.
※ 이를 확인해보기 위해 bind에 2가지의 인자를 더 전달하고 console창을 확인해보자.
명확한(official한..?) 설명은 안되겠지만 이를 토대로 bind에 들어오는 추가되는 인자들이 한 개씩 밀려서 앞에서부터 들어오는 것 같다.
bind(this, x, y, z); 라면 function(x, y, z, e) 로 받아야한다는 의미
18. 베이스캠프
개념을 정리해보자.
props와 state의 차이점?
- props는 read-only이다.
- state는 modify될 수 있으며, 이 때는 this.setState를 이용해야한다.
- Content 내부에서 전달된 props 내용을 바꾸려고 하면 오류가 발생한다.
- props와 state 모두 render라는 함수를 호출, 값들을 바꾸거나 UI가 바꾸려는 작업에 대하여 props와 state를 적절히 수정하여 구현할 수 있다.
- 상위 컴포넌트 → 하위 컴포넌트에 명령 : Props를 전달하여 내용을 변경
- 하위 컴포넌트 → 상위 컴포넌트에 명령 : Props는 read-only니까 이벤트를 통해서 내용을 전달하고 변경
예를 들어,
TOC에서 내용을 전달할 때는 props를 이용하지만, TOC에서 상위 컴포넌트인 App Component의 mode를 변경할 때는 이벤트를 통해 state를 변경한다.
react의 절반 이상이 props와 state를 이해하는 것인가보다..
요즘 생활코딩에서 진행하는 머신러닝 야학도 병행해서 공부하는 중인데 어서 리액트 공부를 끝내고 개인 홈페이지를 만들고 싶다...!!!
'Programming 📱 > React & React Native' 카테고리의 다른 글
| [생활코딩 React 강의] #20~ #Fin. Update 및 Delete기능 구현하기 (0) | 2021.01.19 |
|---|---|
| [생활코딩 React 강의] #19. Create 기능 구현하기 (0) | 2021.01.14 |
| [생활코딩 React 강의] #15 ~ #16 : State와 Props, 그리고 Render (0) | 2021.01.04 |
| [생활코딩 React 강의] #10 ~ #14 : React의 실용성을 피부로 느끼는 (0) | 2020.12.28 |
| [생활코딩 React 강의] #7 ~ #9 : 나도 React 할 줄 안다! (0) | 2020.12.27 |