React 업데이트 : 함수 컴포넌트 구조

리액트는 기본적으로 자바스크립트라고 이해를 하고 있습니다. 이에따라 기본적인 구조를 class형태로 공부를 해 보았는데요. 최근 들어서 class형태로 사용하지는 않는다고 합니다. class 형태는 기본적으로 읽을 정도 즉, 코드를 보고 이해가 되는 정도이면 충분하다고 합니다. 이유는 과거 코드는 class 형태로 많이 사용되었고 class 형태로 사용했기에 this 를 사용할 수 밖에 없었다고 합니다. 

 

하지만 최근들어서는 좀 더 헷갈리는 부분은 없애고 간편하게 사용할 수 있는 자바스크립트 라이브러리 형태로 발전을 해 오고 있으며 그 형태가 함수 컴포넌트 구조라고 합니다. 

 

오늘은 이 부분에 대한 이해를 하는데 중점을 두도록 하겠습니다. 역시 본 내용은 '제로초 TV 리액트 무료 강좌'를 기본으로 공부하고 있습니다. 

 

▒ 리액트 합수 컴포넌트 

 

정확한 개념은 아직 잡히지 않지만 함수형 컴포넌트라고 부르지는 말라고 하네요. 이 말인즉슨 함수라고 보면 무방할 듯 합니다.

 

1. 함수 컴포턴트 기본 구조 

 

함수 컴포넌트는 함수식을 사용한다는 말이겠죠. 함수식을 사용해도 리액트의 기본구조인 Data 영역과 Screen 영역은 반드시 지켜져야 합니다. 

 

Data 영역은 먼저 조건들이 선언이 되어야 합니다. Data가 변해야 Screen도 변하는 구조가 지켜져야 합니다. Screen 영역은 class를 사용했을때의 메소드인 render(  )대신 직접 return 내용으로 대신하며 지난시간 확인했듯이 React18부터 ReactDOM에 연결되는 메소드는 createRoot(  ) 메소드를 사용합니다. 

 

class형태에서는 state에서 선언하고 setState에서 결과를 보여주는 구조를 가지고 있지만 이 두 기능을 변수로 선언하고 결과를 React.useState(  ) 메소드로 사용합니다. 

 

말로만으로는 이해하기 어렵기때문에 기본구조와 예문을 통해서 이해하도록 하겠습니다. 어찌보면 이해후 외우는 편이 낫다고 판단되네요. 

 

그렇다면 기본 구조는 다음과 같이 사용할 수 있습니다. 

 

 

상기 구조를 간단히 설명하자면

 

①번은 class형태에서 사용하였던 타이틀이라고 볼 수 있습니다. ②번은 자바스크립트의 구조분해(할당) 문법을 따라고 있는데 배열안에 두 변수를 사용하여 결과값으로 useState(  ) 값을 기본으로 하고 있습니다, 즉, 첫번째 state를 나타내는 변수명과 향후 return 값에서 사용할 setState 변수명을 같이 선언하고 useState로 연결을 하고 있다고 보면 됩니다. 마지막으로 ④번 구역에서 rendering이 되어 HTML에 화면이 그려지게 만듭니다. 

 

2. class 형 좋아요 버튼 함수 컴포넌트로 만들기 

 

그럼 class형 JSX로 만들어 본 '좋아요' 버튼 누르는 코드를 함수 컴포넌트로 만들어 보겠습니다. 기존에 사용하였던 class형은 다음과 같았습니다.  

 

 

상기 코드를 함수 컴포넌트로 바꾸고 아해하도록 노력합니다. 

 

다음과 같이 변경이 가능합니다. 

 

 

함수 컴포턴트이기에 화살표 함수를 사용해도 됩니다. 

 

.

브라우저에서도 잘 작동되는 것을 확인할 수 있습니다. 이제부터 React의 기본구조는 함수 컴포넌트로 이해하면서 공부하고자 합니다.