리액트(React)의 기초. props, state, component,setState,lifeCycle

리액트(React)란?

리액트는 페이스북에서 제공하는 JavaScript 프론트엔드 라이브러리이다.

 

리액트를 왜?  사용하는가?

HTML과CSS를 이용해서 얼마든지 웹사이트를 만들수 있는데 리액트를 왜 사용하는가? HTML과 CSS등으로만 만들어진 웹사이트는 동적인 데이터를 UI에 뿌려주기에 적합하지 않다. 이러한 문제점을 리액트를 이용한다면 사용자와 상호작용하는 UI를 쉽게 만들어 낼수 있다.

 

컴포넌트

리액트를 사용할 때는 컴포넌트를 class 또는 함수로 정의할수 있다. class로 정의된 컴포넌트는 state와 setState를 사용할 수 있다. 최근 함수형 컴포넌트도 Hook을 이용해 state를 사용할수 있게 되었다.

*그러면 굳이 함수형으로 만들지 않고 전부다 class로 만들면 되지 않을까 하고 생각할수 있다. 문제점은 더 공부하고 난뒤 재 업로드 하겠지만 렌더링도중 값을 변경하게 되면 class는 우리가 원하는 값이 아닌 렌더링중 바뀐 값으로 렌더링 된다.또 속도도 아주 미세하게 빠르다. 하지만 이 부분은 정말 적어 영향을 많이 끼치진 않는다.

 

함수형컴포넌트를 이용해 렌더링하기

//함수형 으로 만들어진 Welcome컴포넌트
function Welcome(props) {
  
  //JSX를 이용해 React에서 javaScript를 이용할수 있다
  return <h1>Hello, {props.name}</h1>;	
}				

//Welcom컴포넌트에 {name:Sara}을 객체로 넣어준다.
const element = <Welcome name="Sara" />;  

//화면에 렌더링 시켜준다.	
//####리액트로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 있다
ReactDOM.render(element, document.getElementById('root'));

 

---

props란?

props는 HTML 속성을 통해 하위 컴포넌트에 전달되는 인자로 읽기전용 데이터이며, 

부모로 부터 받은 데이터를 말한다. props는 immutable해야하며 **컴포너트의 자체 props를 수정해서는 안된다.**

props로 넘길수 있는건 함수,객체,문자,숫자, 등....을 넘길수 있다

 

state란?

state는 컴포넌트가 갖는 상태로 객체의 형태로 컴포넌트 내에서 보관한다.

state를 사용하기 위해서는 반드시 class컴포넌트로 작성되어야 하고 state의 값을 변경할땐 반드시 setState라는 React내 메서드를 사용해야 한다.

 

setState로 인해 state의 값에 변화가 생기면 React는 render()함수를 재 실행한다.

render함수를 재 실행하는 특징을 이용해서 단방향flow인 React에서 업데이트를 할수 있게 해줄수 있다

 

현재 시간 렌더링하기

매초 시간을 렌더링 하는 예제로 class 컴포넌트와 state,setState,lifeCycle,render을 연습할수 있는 예제이다. 좀더 깊은 설명은 React 공식 홈페이지에 가면 찾아볼수 있다

 

//state를 사용할것이기 때문에 class 컴포넌트로 만들어 준다
class Clock extends React.Component {
  constructor(props) {
    super(props);
    
    //state의 값을 초기화 해주는 부분이다. 문제에서는 현재 시간을 보여주기위해 
    //new Data()를 초기값으로 줬다
    this.state = {date: new Date()};
  }

	//다음글에서 볼수있는 lifeCycle로 컴포넌트가 생성될 때 작동하는 메서드로
    //tick메서드를 일정시간마다 재 실행하는것을 볼 수있다.
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

	//tick메서드는 setState를 이용해 data를 new Data()로 업데이트 해주는 작업을 하고있다
  tick() {
    this.setState({
      date: new Date()
    });
  }

//화면에 보여질 부분
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        
        //state를 불러올때 this.state.... 로불러온다.
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

//class컴포넌트의 Clock을 직접 DOM에 넣어줬다
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);