ReactJS 정리 (2) 기본 기능

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다

Props와 State

컴포넌트 간에 데이터를 주고 받는 방식에는 props와 state 두 가지가 있다

 둘 다 Render라는 함수를 호출하여 사용한다

1. props : 상위 컴포넌트 → 하위 컴포넌트 로 값 전달 / 수정

2. event : 하위 컴포넌트 → 상위 컴포넌트 로 값 전달 / 수정

 

 

debugger

스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다

크롬 개발자 도구를 사용할 때 debugger로 되어 있는 부분에서 실행을 멈추고 기다린다

아래 링크 설명을 보면 예제가 나와있으니 참고하면 된다

https://ko.javascript.info/debugging-chrome#ref-1925

Chrome으로 디버깅하기

 

Constructor

Constructor는 우리가 알고 있듯이 생성자를 의미하고, 어떤 컴포넌트가 실행될 때

render 함수보다 먼저 실행이 되어 컴포넌트를 초기화해주는 역할을 한다

아래의 예제를 보자

class App extends Component{
  constructor(props){		//constructor
    super(props);
    this.state = {		//App 컴포넌트의 state 값
      subject: {title:'WEB', sub:'world wide web!'}		
    }
  }
  render(){
    return (
      <div className="App">
        <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>	//this.state.속성명으로 가져옴
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language :)"></Content>
      </div>
    );
  }
}

Contructor에 state와 같이 미리 세팅할 코드를 담은 후, 나머지 실행 코드는 render에 작성하면 된다

또한 좋은 사용성을 가진 코드를 만드는 핵심은 외부에 알 필요가 없는 정보를 철저하게 은닉하는 것이다

위의 코드는 Subject, TOC, Content라는 컴포넌트의 내용이 나타나지 않았고, 컴포넌트가 위치할 자리에 태그로만 나타내었다

추가로 설명하자면 컴포넌트 실행 순서는 App → Subject → TOC → Content 순이다

 

key

<li>와 같은 리스트에서 엘리먼트에 안정적인 고유성을 부여하기 위해 key값을 지정해주어야 한다

key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다

항목의 순서가 바뀌는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다 → 성능 저하 또는 state 문제 발생

아래의 예제를 보자

<li key={data[i].id}>{data[i].title}></li> //key 부여

중괄호는 JSX를 이용한 JavaScript 들어가는 부분이므로 중괄호를 사용하였다data는 가져올 데이터를 담은 배열이고, id는 각 원소의 속성이름 중 하나이다더 자세한 설명은 밑에 React 홈페이지에서 참조하면 된다https://ko.reactjs.org/docs/lists-and-keys.html#keys

리스트와 Key – React

 

state와 props로 전달되는 값 변경React에서는 state나 props로 전달되는 값이 바뀌면 해당 state 값을 가진 컴포넌트의 render 함수가 다시 호출된다

 

이벤트

이벤트 중에서도 간단하고 대표적인 <a> 태그에 대해 배웠다<a> 태그 부분을 누르면 a의 href 속성 값으로 이동한다 (현재와 같은 주소면 리워드 됨)<a> 태그의 onClick과 같은 이벤트를 처리할 때, React는 함수의 첫 번째 매개변수 값으로 이벤트 e를 줌

 onClick = {function(e){ 
 		e.preventDefault();	//기본 동작 방지
 		... //코드 내용
 	}
}

onClick을 실행하면 함수의 이벤트에 의해 기본적으로 리워드 되는데, React에서는 함수가 false를 반환해도 함수의 기본 동작을 방지할 수 없기 때문에이벤트 객체 e의 preventDeafault() 메소드를 이용하여 기본 동작 방법을 금지시킬 수 있다

 

바인딩(binding)

구체적인 값을 할당하는 각각의 과정

아래의 예제를 보고 이해를 해보자

var obj = {name : 'hj'}
function bindTest(){
  console.log(this.name); 		// 여기까지 this는 아무것도 없음. undefined 상태
}
bindTest.bind(obj);			// 함수 내에서 this에 obj을 할당함

함수 bindTest() 내에서 this는 아무것도 가리키지 않기 때문에 bindTest.bind(obj);을 해줌으로써 this에 obj를 할당해준다

따라서 .bind()는 함수 내에서 가리키게 될 this를 지정해주는 방법이라고 생각하면 된다

React에서 자주 사용할 이벤트 처리 함수에서는 this(해당 컴포넌트 객체)를 찾을 수 없기 때문에,

함수 뒤에 .bind(this)를 추가해줌으로써 this(해당 컴포넌트 객체)를 넘겨줄 수 있다

더 자세히 설명하자면!

render 안에서 this는 해당 컴포넌트를 가리키지만, 이벤트 처리 함수에서는 this는 아무것도 가리키지 않는다

따라서 .bind(this)를 추가하여 함수 안의 this가 해당 컴포넌트 객체(함수 밖에서의 this)를 나타내도록 해야 한다

 

setState로 state 값 변경 

state의 값을 변경하려면 setState를 사용해야 한다

this.state.mode = 'welcome'

만약 위에처럼 this.state.속성이름 = '변경할 값' 이런식으로 하게 된다면

실제로 state의 값은 변경되지만 React는 변경되었다는 사실을 인지하지 못해 재렌더링을 하지 않게 된다

this.setState({
	mode:'welcome'
})

따라서 this.setState({속성이름:'변경할값'}) 이런식으로 setState를 이용하여 변경해야 한다

 

dataset 속성

"data-"로 시작되는 속성은 e의 target의 dataset의 해당 이름이 있다

<a data-name="hj"></a> //e.target.dataset.name
<a data-id="123"></a> // e.target.dataset.id

e.target.dataset.속성명 을 이용하여 값을 찾아낼 수 있다

 

이벤트 타겟 e.target

debugger를 이용하여 멈춘 후, console에 e를 출력하면 이벤트 e를 가진 속성들이 나온다

e.target은 이벤트가 소재하고 있는 태그를 가리킨다

 

※ 해당 정리는 생활코딩 강좌를 참고하여 만들었습니다

강좌 링크 : https://www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi