React9 [React] 함수형 컴포넌트 vs 클래스형 컴포넌트 비교(2) 원래 한 포스트에 다 쓰려고 했는데 생각보다 글이 길어져서 분리했다. 이번글에는 함수형 컴포넌트를 정리하고 함수형과 클래스형이 어떻게 다른지 비교해보려한다. 함수형 컴포넌트는 함수선언 + 리턴 구조로 클래스보다는 간결하고 직관적이다. 기본적으로 써줘야하는 구성이 적기때문에 클래스컴포넌트 방식보다 코드길이는 좀더 짧다. 함수형에서는 state를 객체형식이 아니라 각각 다 분리해서 써주는게 좋다. 만약 값을 한번에 변경하는 때는 객체형식으로 써도 상관이 없지만, 객체 구성요소 중에 한개의 요소만 변경하고 싶을 때는 좋지 않은 방법이다. 왜냐하면 객체요소중에 한개만 변경하면 다른 구성요소들은 아예 state에서 삭제된 상태로 인식하기 때문이다. 그렇기 때문에 웬만하면 state 관리가 용이하게 분리해서 써주는.. 2021. 11. 10. [React]함수형 컴포넌트 vs 클래스형 컴포넌트 비교(1) 몇년 전까지만 해도 리액트에서는 Class로 컴포넌트를 생성하는 방식을 사용해왔다. 하지만 내가 리액트 공부를 시작할때는 공식문서에서도 함수형컴포넌트를 사용하는 것을 권장하고 있었기 때문에 처음 배울 때 함수형으로 배웠다. 공부를 하다보면 구글링을 통해 해결방법을 찾아야 하는일이 많은데 아무래도 함수형이 쓰이게 된지 오래되지 않아서Class형으로 작성된 레퍼런스들이 많기때문에 클래스형 코드를 보고 함수형과 어떤 부분이 차이가 있는지 알아보고자 공부했다. 아래의 코드는 간단한 구구단게임 예제를 만드는 코드이다. 1. 클래스형 컴포넌트 : class component 선언 + render(사용자 화면에 보이는 부분) 으로 나눠서 작성해줘야한다. render 부분은 사용자가 볼 수 있는 화면이다. state에.. 2021. 11. 10. [React] 웹팩 설치하며 리액트 구동 원리 알기 리액트로 새로 작업을 할 때 npx create-react-app 폴더명또는 yarn create-react-app 폴더명 명령어를 사용해서 시작을 하는데, 이 명령어를 입력하면 리액트로 작업을 하기위한 준비를 자동으로 해준다. 자동으로 실행되는 과정과 원리를 알아보고 이해하려고 강의를 듣고 정리해본다. 1. package.json 설치 npm init 2. 리액트 돔 설치 npm i react react-dom 3. 웹팩설치(리액트 할때 필요한 웹팩, 웹팩cil를 설치해줌 npm i -D webpack webpack-cli 이 과정까지 하고 package.json에 들어가보면 잘 설치된걸 확인 할 수 있다. dependencies에는 실제 서비스에서 쓰이는 것들이 기록되고, 개발에만 쓰이는 것들은 de.. 2021. 11. 10. 이전 1 2 다음
