[React] 생활코딩 part .2 Component

1. Before React va After React

• 리액트는 복잡하고 많은 양의 코드들을 내가 정의한 코드 속에 한줄로 넣어서 사용할 수 있게 해준다.
• 리액트 기술이 없다면 우리는 가독성이 떨어지는 코드들 속에 파묻힐 것이다.
• 예를 들면, navigation을 상징하는 모든 태그들을 <navigation></navigation>라는 component에 담아서 사용할 수 있다면 너무 편할 것

2. 컴포넌트 만들기

class ClassName extends Component {
	render(){
    	return(
        	<태그> 
            </태그>
        );
    }
}

• 리액트가 가지고있는 Component 클래스를 상속시켜서 클래스를 생성한다.
• 이 클래스는 render라는 메서드를 가지고있다.
• 최신 js에서는 class 안에 함수는 function을 생략한다.
• 하나의 최상의 태그로 시작해야 한다.
• JSX를 통해서 컴포넌트 렌더함수 안에서 HTML,JS코드들을 자유롭게 사용할 수 있다. 나중에 JSX가 자동으로 컴파일 해서 화면에 출력해준다.

3. props

• 새로 생성한 component내의 코드들은 유동적으로 수정할 수 없다.
• component를 App component에 호출에서 사용하면 정해진 값만 출력해준다.
• 정적인 component를 수정할 수 있게 만들어주는 코드가 props 이다.
• 맨처음 component를 생성해 줄 때 porps를 사용하면, App component에서 생성된 component를 수정할 수 있다.

• 위의 그림에서 h2태그의 {}에 App component에서 지정해준 값이 입력된다.

4. Component 파일로 분리하기

• 생성한 컴포넌트들이 많아지면 다시 관리하기 어려워진다.
• 'components' 디렉토리를 만들어 component들을 관리 한다.
• component를 파일로 생성하는 과정
  1) component이름.js파일을 생성
  2) 파일 안에 react 코드 입력
  import React, { Component } from 'react';
  3) 파일의 맨 끝에 'expert default conponent명' 코드를 적어준다. 다른 파일에서 사용을 허가한다는 의미이다.
  4) App.js에서 생성된 component 파일을 import 해준다.
  import TOC from './components/TOC';

5. State

1)State? Props?
- porps는 사용자의 관점에서 중요한 속성이고, state는 component의 기능을 더욱 다양하게 만들어서 사용해야하는 개발자의 관점에서 중요한 속성이다.
- 리액트는 props와 state의 영역을 철저하게 분리해서 사용한다.
- 예를들면, 아이폰을 사용할 때 사용자는 외부 UI부분에만 신경쓰지 안에 들어가는 부품의 모양, 형태 등에는 관심도 없고 알 필요도 없다.

2)State의 사용

• component가 실행될 때 constructor는 state를 초기화 해주고 render메서드 보다 먼저 실행된다.

• state를 사용하기 위해 constructor 구조 안에 this.state를 초기화 해준다.

• 상위 component에 state의 값을 입력해주면 하위 component의 props를 통해서 원하는 값을 수정할 수 있다. 즉, 상위 컴포넌트의 state값을 하위 컴포넌트에 props로 표현해서 사용할 수 있다.

  결론적으로, state를 사용하면 상위 component(app component)에서 하위 컴포넌트를 수정할 수 있다. 즉 하위 컴포넌트를 수정하고 싶을 때 import해줬던 components 디렉토리의 js파일을 찾아 들어가 수정할 필요가 없다는 뜻이다. App.js를 사용하는 index.js에서는 어떤 방식으로 컴포넌트가 굴러가는지 숨기는 것이 좋은 사용 방법이다.

  3)key

• state에서 여러개의 값을 다루는 방법을 배운자.

• 여러개의 값을 자동으로 생성할 때는 프로퍼티 별로 'key props'가 필요하다.

• 일단 리액트가 여러개의 값을 state로 생성할 때 필요한 값이라고 생각하고 넘어가자.

  

• state에 contets라는 새로운 state 값 생성

• 하위 컴포넌트인 TOC에 props를 추가해준다.

  

• TOC.js에서 state 값 형식에 맞게 코드를 작성

• 이 때 리액트는 <li>태그에 'key props'를 요구하는데, 추가하는 데이터들의 각각의 요소들의 식별자를 입력해주면된다. 여러개의 데이터 중 햇갈리지않게? 아이디값을 준다고 일단 이해한다.