[블로깅챌린지] 리액트 입문 ( component , props , state 에 대해 )

블로깅 챌린지 첫날이 다가왔다. 나는 3주간 수요일에 블로그 글을 작성하기로 했다. 현재 코드스테이츠를 수강하면서 배운 것들 중 리액트를 공부했을 때 가장 어려웠고 부족했던 거 같아 리액트에 관한 주제로 3주간 세가지의 리액트를 주제로 한 글을 작성해볼 예정이다 . 오늘은 리액트를 사용한다면 기초적으로 알아야할 지식에 대해 공부하고 작성해볼 것이다. 
다양한 리액트 실습을 진행하면서 아직 props 와 state에 대해 많이 헷갈리는 것 같다 .. 오늘을 계기로 완벽하게 이해하고 넘어갈 것이다 ! 

리액트란 ? 
리액트(React)는 자바스크립트 라이브러리로서 컴포넌트(Component) 기반으로 동작합니다. 리액트 컴포넌트는 props와 state를 통해 데이터를 관리하고 화면에 렌더링합니다.

---

컴포넌트란 ? 

리액트에서 앱을 이루는 가장 작은 조각을 의미함 
-> 리액트에서 UI요소를 구분할 때 컴포넌트 단위를 사용함. 
컴포넌트와 컴포넌트를 합쳐 새로운 컴포넌트를 생성할 수 있고 독립적으로 구성할 수도 있음 . 
컴포넌트는 함수컴포넌트 ,클래스 컴포넌트 2가지가 존재함. 

컴포넌트 구성요소 
 1. property(props) 
부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터, 프로퍼티 값은 자식 컴포넌트에서 수정할 수 없음 
2. state 
컴포넌트의 상태를 저장하고 수정 가능한 데이터 

---

함수 컴포넌트 
함수형 컴포넌트는 자바스크립트의 함수 기반 컴포넌트임 
자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고 return 문에 JSX 코드를 반환함

function Component() {
  return (
    <div>
      Hello !This is Manchoon's Blog
    </div>
  );
}

 

화살표 문법으로 나타낸 함수 컴포넌트 

const MyComponent = () => {
    return (
        <div>
            Hello !This is Manchoon's Blog
        </div>
    );
};

 

---

클래스 컴포넌트 
클래스 컴포넌트는 자바스크립트의 클래스 기반 컴포넌트로 class로 정의하고 render() 함수에서 jsx 코드를 반환함 

특징 
1. class 키워드로 클래스 컴포넌트 생성
2. React.Component 상속이 필요함 
3. render() 함수 사용 
4. this 키워드 사용 

 

import React, { Component } from 'react';

class MyComponent2 extends Component {
    render() {
        return (
            <div>
               Hello !This is Manchoon's Blog
            </div>
        );
    }
}

아래는 클래스형 컴포넌트의 코드 구조입니다.

Component 를 상속받고, render() 메서드를 통해 return 문 안에 있는 JSX 코드를 반환합니다. 

 

---

Props 란?
부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 
props 는 읽기 전용으로 자식 컴포넌트에서 변경 불가능함 
부모 컴포넌트에서 props를 전달할 때는 속성 형태로 전달됨 

아래 코드에서는 ParentComponent에서 ChildComponent로 name이라는 props를 전달하고 있음 
ChildComponent 에서는 props를 인자로 ㅂ랃아 name을 출력하고 있음 

function ParentComponent() {
	return(
    	<ChildComponent name="manchoon" />
     );
 }
 
 function ChildComponent(props) {
 	return(
    	<div> Hello, {props.name} </div>
    );
}

 

 

State 란?
컴포넌트 내부에서 관리되는 데이터
state는 컴포넌트 내부에서 변경할 수 있으며, 변경되면 해당 컴포넌트와 하위 컴포넌트들이 다시 렌더링 됨 .
state는 클래스형 컴포넌트에서 사용되고 함수형 컴포넌트에서는 useState 훅을 사용하여 state 관리함 
(useState는 배열을 반환하며 , 첫 번째 요소는 현재 state 값, 두번째 요소는 state 값을 변경하는 함수임 )

아래 코드는 state 값으로 count 라는 변수를 선언해주었고 초기값으로는 0으로 할당함 
버튼 클릭 이벤트가 일어날 시 count 값을 1 씩 증가하도록 만든 코드임 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

오늘은 이렇게 리액트 컴포넌트, props , state 에 대해 공부해보았다. 이 외에도 리액트를 제대로 알기 위해선 다양한 기초지식이 필요하니 열심히 공부해나갈것이다 !