리액트 2 기초 / 알아야할 것들 (1) function형 / Class형 / 주요 Hook useEffect / useState / event 개념

 

 

import React from 'react'

일단 리액트를 쓰기 위해서는 리액트를 임포트 해야한다. 

리액트에서는 다른 컴포넌트나 여러 라이브러리를 이런 형태로 임포트 해온다. 

단 컴포넌트의 경우에는 from 뒤에 컴포넌트 이름과 함께 경로를 입력해야 한다. 

같은 폴더 안에 있는 컴포넌트라면 './Component'라고 쓰고 

같은 폴더 내 따로 components 폴더에 들어있는 컴포넌트라면 './components/Component'라고 쓰고 

상위 두 폴더 위에 있다면 '../Component'라고 쓰고 

 

상위 세 폴더 위에 있다면 이거때문에 많이 햇갈렸었는데 점을 세개를 쓰는게 아니라 두개씩 두번 써야한다.

'../../Component' 이런식으로.

왜인지는 모르겠지만 세개는 인식을 안한다고 한다. 

Component는 컴포넌트 이름을 의미하는 것이고 뒤에 js 또는 타입스크립트를 쓴다면 tsx와 같은 타입이 있을텐데 그건 생략한다.

 

function형 (Class형)

리액트는 펑션형과 클래스형이 있다. 

둘다 라이프 사이클 이라고 하여 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때를 기준으로 작업을 수행하고 

state, 우리가 흔히 변수라고 알고 있는 값을 직접 조작하는 것이 아니라 반드시 내장 함수를 사용하여 조작해야한다. 

 

하지만 클래스 형의 경우 render 함수가 필수이고 그 안에서 보여주어야 할 jsx 반환이 필수이다. 

초기 브라주화면을 갱신하기 위해 componentDidMount() 함수를 이용하고 

컴포넌트 업데이트시 componentDidUpdate() 메서드를 이용하고 

제거시 componentWillUnmount() 메서드를 통해 제거해야한다. 

 

하지만 펑션형의 경우 클래스형보다 선언이 쉽고 메모리 자원을 덜 사용하며 빌드 후 결과물 크기도 작다. 

라이프 사이클 API를 사용할 수 없다는 단점이 기존에는 있었는데 Hook을 통해 해결되었다.

화살표 함수를 사용한다. 

 

사실 다른 것보다도 선언이 쉬운 것이 좋아 나도 펑션형을 주로 사용하여 클래스형은 특히 많이 까먹었다. 

 

Hook

위에서 말한대로 펑선형 컴포넌트에서 사용하는 라이프 사이클 API 및 여러가지 내장 함수이다.

아래는 가장 많이 쓰는 두가지를 설명하겠지만 검색해보면 다른 훅도 많아서 읽으면서 뭐가 있는지 알아두면 작업하다가 필요한 곳에 적용하기 좋다. 그리고 useReduce였나 아무튼 리덕스 관련된 훅은 리덕스에서 정리.

 

useEffect

 

React.useEffect(() => {
	function1();
    function2();
},[state1,state2])

 

이런 식으로 사용한다.

제이쿼리로 따지면 document ready 와 같은, 화면 생성 후 실행할 함수들을 담는 훅이다.

거기에 대괄호 안에는 값이 변하면 화면이 리렌더링 되어야 하는 변수들을 담았다. 

해당 변수가 속한 부분만 리렌더링 된다. (리액트의 자랑!)

 

다만 변수 관련 부분이 리렌더링 되더라도 함수는 처음에만 실행되길 원한다면 두 개를 분리해서 쓰면 된다.

 

React.useEffect(() => {
	function1();
    function2();
},[])
React.useEffect(() => {},[state1,state2])

 

이렇게 쓰면 서로 영향을 받지 않는다. 

useEffect를 여러개 써도 된다는걸 몰라서 헤맨 적도 있었다. 

 

그리고 useEffect 앞에 React를 붙이는건 내장함순데 임포트 할때 쓰겠다고 선언을 안해서 그런거다. 

일일이 선언하기 귀찮으면 그냥 저렇게 써도 되지만 여러번 쓸거라 그냥 한번 선언하고 여러번 함수명만 쓰겠다고 한다면

 

import React, { useState,useEffect } from 'react';

 

이런식으로 임포트 할때 선언하면 된다.

 

useState

state는 리액트에서 중요한 개념 중에 하나이다. state 값으로 모든 변수를 받고 변화를 관리하기 때문이다. 

그냥 보통 다른데서 하듯이 타입 변수 = 값 이렇게 선언하면 안되고 

 

const [value,setValue] = React.useState('');

 

이런 형식으로 값을 선언해야 하는데 여기서 value는 변수명이고

setValue는 변수값을 지정하는 함수명이다. 

나중에 이 변수값을 변경하기 위해서는 setValue를 사용해야 한다. 

 

setValue('변경값');

 

이렇게 하면 기존 value의 값은 useState 뒤에 있는 '' 값, 즉 아무 값도 지정 안되어있지만 어쨌든 String인데 이제는 '변경값'이라는 String이 들어가게 된 것이다.

어디선가 value를 호출하면 '변경값'이라는 문자열이 나오게된다. 

state가 array라면 초기값 빈 것은 []로 표현하고 나중에 추가하기 위해서는 concat을 이용하는데 array는 뒤에 다시 정리.

 

Eventlistener

리액트는 일반적으로 DOM 요소가 처음 렌더링될 때 리스너를 제공한다. 

리액트의 이벤트는 소문자 대신 카멜케이스 접붙은 단어마다 각 앞머리를 대문자로 적는 (낙타 등처럼 크기가 중간중간 튀어나왔다는 뜻으로 카멜 케이스) 형식이다.

 

<button onclick="buttonEvent()">
	button
</button>

 

일반적인 js가 이런 형식이라면 리액트는,

 

<button onClick={buttonEvent}>
	button
</button>

 

이런식으로 작성한다. 이벤트는 카멜케이스.

이벤트가 뭔지는 문자열이 아니라 함수로 전달.

 

그리고 이벤트 핸들러에 전달할 인자가 있다면 화살표 함수를 사용해서 넣어주어야 한다.

 

<button onClick={(e) => buttonEvent(id, e)}
	button
</button>