React 2

김진섭·2021년 4월 8일

목록 보기

2/5

생활코딩 React 강의 / https://www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

코딩애플 React 기초 / https://www.youtube.com/watch?v=nahwuaXmgt8&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=2

공식문서 / https://ko.reactjs.org/docs/getting-started.html#try-react

2021.04.07

7. props와 state

사용하는 쪽(Props)과 구현하는 쪽(State)를 철저하게 분리하고 각자의 편리성을 도모하는 것이 중요하다.

render() 함수 전에, Component 작동 전에 무언가의 값을 초기화 시켜주고 싶다면 constructor를 사용해야 한다.

이후, app의 state에 content를 배열 형태로 만들고 이를 props로 nav에 주입시켜준다. 아래쪽에서 Nav가 data라는 이름으로 주입된 contents의 값들을 받고있는 것을 볼 수 있다.

App의 state에서 넘어온 data 값을 변수에 담아주고 이를 lists에 반복문으로 넣고 화면에 출력한다.

이때 var로 선언했었는데, const와 let이라는 키워드를 이용해 변수를 선언하라는 IntelliJ의 조언(?)이 떠서 사용해보았다. 찾아보아도 그냥 var와 같은 기능이라고 하니 크게 신경쓰지 않아도 될듯....이라고 생각했었는데 그건 또 아닌거 같다.

7-1. var, const, let

var, let, const의 차이점

var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.

var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.

var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.

var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.

var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

(JavaScript) var, let, const의 차이점 / 출처
https://medium.com/@yeon22/javascript-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-9fab5c264c9c

결론적으로, var는 버그나 메모리 누수와 같은 위험성이 있기 때문에 더 신버전인 let과 const를 사용하는 것이 좋다고 한다. 습관으로 만드는게 좋을듯.

8. Event state props와 render() 함수

React는 state나 props에 변경점이 생기면 state를 가지고 있는 Component의 render함수가 다시 호출된다. 또한, 해당 render 함수 하위에 있는 Component들의 render함수도 다시 호출된다. 한마디로, 화면이 전부 재호출되며 변화하는 것이다.

다음과 같이 소스를 짰다면, App.state의 mode 값에 따라 render함수의 조건문이 반응하여 _title과 _desc 값이 변화하게 된다.

그러면 자연스럽게 content의 props가 변화하게 되고, 이에 따라 페이지의 화면이 변화한다.

8-1. Event 설정

링크에 onClick 이벤트를 주었다. 이때, 마우스이벤트는 기본적으로 페이지를 리로드 하게 된다. 이러한 기본적인 기능을 막아주는 것이 바로 e.preventDefault이다. 이를 통해 클릭시 리로드를 막고 alert창만 띄울 수 있게 된다.

debugger로 원하는 곳에서 코드의 실행을 멈출 수 있다. 꼭 알아두자.

8-2. Event에서 State 변경하기.

여기서 this.state.mode로 입력하면 this가 누굴 가르키는 것인지 못 찾는다. 이를 제대로 알려주려면 해당 함수가 끝난 직후에 .bind(this)를 추가하고, this.setState를 통해 mode를 바꿔주어야 한다.

여기서, state값의 직접 변경은 constructer 내부에서만 가능하다는 것을 알아두자. 만약 밖에서 값을 변경시켜주고 싶다면 this.setState를 통해 바꿔주어야 한다.

8-3. Component Event 만들기.

위와 같이, 무려 함수(이벤트) 또한 props로 전달이 가능하다. props로 'onChangePage' 라는 setState로 mode를 welcome으로 변경시켜주는 함수를 넘겨주었다.

Subject Component에서, 링크를 클릭할 때 this.props에 onChangePage() 함수를 받아 실행해준다. this가 들어가기 때문에 함수가 끝난 직후에 .bind(this) 붙여주면, 이벤트 발생 시 onChangePage 함수의 기능이 실행되어 웹사이트의 내용이 바뀌게 된다.

그런데 여기서, 생활코딩에서는 속성을 이용한 조금 복잡한 방법을 사용하여 링크 클릭시 내용이 바뀌도록 만들었다.

event e 객체의 target 속성을 이용한 방법인데, target은 이벤트가 발생한 태그, 즉 a태그를 가리킨다. 여기서, data- 접두사로 시작하는 속성은 dataset이라는 속성으로 접근할 수 있게 된다. 그래서 e.target.dataset.id 로 data-id를 찾을 수 있다. 이 id 값을 onChangePage에 주어 값을 구분할 수 있게 만들었다.

나는 이 방법이 조금 복잡한 것 같아 다른 방법을 찾아 사용하였다.

이미 Nav Component에서 반복문을 돌리면서 data[i].id를 통해 해당 Component의 id값을 받아오고 있다. 이를 onChangePage에 전달하고, 이 전달 받은 값을 this.setState로 selected_content_id 값에 주면 클릭 할 때 마다 자연스럽게 id값이 변화하면서 본문의 내용이 바뀌게 된다.

여기서 알아야 할 점은,

this.setState는 한번에 하나의 state만 바꿀 수 있다.
확실하진 않은데 두개를 주니 콜백으로 넘어가버렸다. 검색해도 딱히 방법은 없는 것 같다.
Component간의 매개변수의 이동이 자유롭다. 함수도 포함.
이를 이용하면 여러 문제를 좀 더 쉽게 다룰 수 있을 것 같다.