React (2)

이민경·2024년 6월 3일

Component?

React 앱의 구성 요소로, 재사용 가능하도록 만들어져 있으며 UI를 작은 조각으로 나누어 관리함.
컴포넌트 명은 보통 대문자로 작성함.

Component 는 아래와 같이 두가지로 나뉨.
1. 클래스형 컴포넌트 : React.Component 클래스를 상속받아 구현
2. 함수형 컴포넌트 : 함수형태로 구현

▶ 컴포넌트를 extends를 하면 윗 부분에 import구문이 자동으로 생성됨을 알 수 있다.
위 부분은 컴포넌트를 선언하는 내용이다.

state와 prop(s)
React 컴포넌트는 두 종류의 데이터를 다룸

props(속성) : 부모 컴포넌트로 부터 전달되는 읽기 전용 데이터
state(상태) : 컴포넌트의 내부에서 관리되며 컴포넌트의 동작 및 UI 렌더링을 제어하는데 사용(내부 상태를 관리하는데 사용되는 데이터)

// 클래스형 컴포넌트
class Exam1 extends Component{ //컴포넌트의 선언부

[컴포넌트 정의 부분]

//필드

//생성자
constructor(prop) { 
        super(prop);
        this.state = { count : 0 };
       
// 메서드 (함수)
handleClick = () =>{ //handleClick이라는 이름의 함수를 정의함
this.setState({count : this.state.count + 1});

// render 함수 (클래스형 컴포넌트에서 필수 구문)
    render(){
         return(
            <div>
                <h1>Count : {this.state.count}</h1>
                <button onclick={this.handleClick}>증가</button> 
            </div>
         );
     }
  }
  export default Exam1; // 컴포넌트 내보내기

constructor(prop) 여기서 prop?
부모에게 받은 속성 => super 생성자를 이용해 부모에게 전달하겠다는 내용
this.state = { count : 0 }; 여기서 state ?
컴포넌트의 내부 상태를 관리하는데 사용되는 데이터
=> state 중에 count라는 이름을 가진 상태가 존재하는데 그 것에 초기값이 0이라는 뜻 (변수처럼 사용한다고 생각하면 됨)

간략히 정리하자면, count는 Exam1이라는 컴포넌트의 내부 상태 중 하나의 데이터이며, 초기값이 0으로 설정됨.

React에서 상태(state)와 변수(variable)의 차이점

공통점 : 데이터 저장과 관련
차이점 : 각기 다른 역할과 사용방식을 가짐.

state (상태) : React 컴포넌트에서 데이터가 저장되는 곳.
상태 값이 변경될 때 마다 컴포넌트가 다시 렌더링 됨.
variable (변수) : 컴포넌트 내에서 상태가 아닌 다른 데이터를 저장하기 위해 사용됨.
변수값이 변경되어도 컴포넌트는 다시 렌더링 되지 않음.

ex) let num = 0
num = 1 ;
```
  ▶ 이 경우 변수는 값이 바뀌지 않는다. 렌더링이 되지 않는다.
  but, 상태는 감지되자마자 재랜더링이 된다.
```
this.setState({count : this.state.count + 1});
▶ 이 컴포넌트의 상태(state) 중 count를 현재 상태값에서 +1한 값으로 상태를 다시 세팅(변경)
render() 함수
▶ 클래스형 컴포넌트에서 render 함수 안에 return 구문을 필수로 작성해야한다.
밑에 작성할 return에는 무엇을 렌더링 할지 작성하면 됨.
꼭 모든 함수를 작성한 후 구문을 다 빠져나와 해당함수를 기본적으로 내보낼 수 있도록 작성을 해줘야한다 export default Exam1; 이렇게!!
▶ 해당 Exam1.js 파일에서 기본적으로 내보내는 컴포넌트의 이름은 Exam1 이라는 뜻이고 컴포넌트를 내보낸다는 함수이다.

이렇게 작성을 했다면 App.js에서 해당 js를 import하여 화면에 띄워주게 코드를 작성해주면 된다.

import logo from './logo.svg';
import './App.css';
import Exam1 from "./exam/Exam1.js"


function App() {
  return (
    <div>
      {/*여러가지 컴포넌트 불러다 사용!*/}
      {/* ctrl + / :jsx 주석 */}
      <Exam1 />
      
    </div>
  );
}

export default App;

결과는 바로 🎉

▷ 현재 함수를 버튼을 적용시켜놓았기에 증가버튼을 누르면 count 옆에 숫자가 즉각적으로 반응하여 숫자가 증가하는 것을 볼 수 있다!

함수형 컴포넌트 만들기
: 함수 형 컴포넌트에서 상태를 사용하는 방법

function Exam2(){

    // 함수 형 컴포넌트에서 상태를 사용하는 방법
    const [name, setName] = useState("민경 :)");
    //name이라는 상태값에 초기값을 "민경:)"라고 지정한 것
    //useState 를 Hooks라고 부르는데 (기능모음) 그 중 상태값을 손쉽게 사용할 수 있게 만들어둔 것

    //setName :상태값을 변경해주는 함수!
    const handleClick = () => {
        setName("길동 :)");
    }
    //함수형 컴포넌트는 렌더링이 필요없음.
    return(// 함수형 컴포넌트는 render() 함수 제외하고 바로 return 작성하면 됨
        <div>
            <h1>Hello, {name}</h1>
            <button onClick={handleClick}>이름 변경</button>
        </div>
    )
}
export default Exam2;

위 함수형 컴포넌트도 작성이 다 되었다면 동일하게 App.js에 import추가해주면 된다.

import logo from './logo.svg';
import './App.css';
import Exam1 from "./exam/Exam1.js"
import Exam2 from './exam/Exam2.js';

function App() {
  return (
    <div>
      {/*여러가지 컴포넌트 불러다 사용!*/}
      {/* ctrl + / :jsx 주석 */}
      <Exam1 />
      <Exam2/>
    </div>
  );
}

export default App;

결과는 🎉

▷ 현재 이름변경 버튼에 함수를 적용해놓았고 새롭게 설정할 이름을 적어두어서 이름변경 버튼을 누르면 설정한 이름으로 변경되는 것을 볼 수 있다.

😎 리액트를 사용하니 js보다 훨씬 간편하고 좋다 익숙해지면 아주 좋을 것 같다!!!

※ 그리고 ! 최근에는 성능적, 간결성 등에서 함수형 컴포넌트를 많이 사용하고 있으니 참고!

**클래스형 컴포넌트와 함수형 컴포넌트의 장단점 구별**

클래스형 컴포넌트

[ 장점 ]
1) 생명주기 메서드 제공 :

componentDidMount, componentDidUpdate, domponentWillUnmoint ... 등의 생명주기 메서드를 사용할 수 있어서 컴포넌트의 생명주기 동안 특정 동작을 쉽게 구현할 수 있음.
but, 함수형 컴포넌트에서도 Hooks이 생기면서 생명주기 메서드를 쉽게 사용할 수 있게 되었음... ! 따라서 함수형 컴포넌트를 자주 사용하고 있다..!

[ 단점 ]
1) 복잡성