[react web] 컴포넌트 만들기

react를 통해 컴포넌트를 만들어 볼까 한다. 복잡한 이론 없이 최소의 중요한 것만 적어보겠다. 심화 내용은 필요 시 다른 좋은 참고 서적을 참고하기 바란다.

 

 

https://han-py.tistory.com/395

 

위의 단계(react 시작)부터 빠르게 우리는 여기 까지 왔다. (보는데 2분도 안걸리니 보고 오면 좋다.)

 

 

 

1. 개념

 기본적으로 html을 해 보신 분들이 이 글을 보고 있을 것이다. 사실 html으로 웹으로 만들어도 된다. 그러나 react 라이브러리를 쓰는 이유는 무엇일까? 단지 현업에서 많이 사용해서?

 

내가 생각하는 이유는 간단하다. html 만 사용하는 것보다 편하기 때문이다. 그렇다면, 무엇이 편할까? .html 파일에 코드를 작성하는 경우 굉장히 길어지고 유지보수 재사용성이 어렵다. 따라서 .html의 긴 코드를 목적에 맞게 재사용성에 맞게 파일로 나누어 관리를 하기 위해 react를 사용한다고 생각한다. 그리고 이때 나눠진 각각의 파일을 component라고 한다.  

 

그럼 만들어보자.

 

 

2. 코드

코드 작성 순서는 아래와 같다.

1. jsx 파일(js 파일도 가능) 을 만든다.
2. app.js에서 만든 파일을 불러온다
3. 끝

 

2.1 파일 만들기

> 위치는 어디든 상관 없다. app.js에서 불러와야하기 때문에 위치를 잃어버리지만 않으면 된다.

나는 app.js와 같은 위치에 componet 폴더를 넣었고 그안에 test 폴더를 넣고 임의로 CreateComponent라는 이름으로 jsx파일을 만들었다.

 

2.2 만든 파일에 내용 적기

> 기본적으로 파일을 불러오려면 export를 해줘야한다. 아래와 같이 적으면 된다.

 

헷갈리는 개념

const 함수이름 = () => {
}

우리는 위와 같이 함수형 컴포넌트를 사용했다. class형을 사용하기도 하지만, react Hook을 사용하는 우리는 함수형 컴포넌트를 사용하는 것을 추천한다. class형은 함수형이 익숙해지면, 이해만 하자. 우선은 손에 익히는게 우선이다. 

 

class 형은 react 초창기때 나온 것이고, 함수형은 최신이다. 더 쓰기 편하라고 만든 최신 기술을 안쓸 이유가 있을까???? 우선은 함수형으로 통일해서 작성하는 연습을 하자. class 형에서는 hook 못쓴다!

 

 

 

이제 적은 파일을 import할 파일에 추가만 해주면된다. 우린 app.js에 추가를 하기로 했으니 app.js에 추가하자.

 

 

2.3 app.js 에서 import하기

 

위에서 넣고 싶은 위치에 CreateComponent를 추가 했다. 그리고 import로 파일 경로를 적어줬다.

 

끝이다. 화면 내용은 아래와 같다.

 

 

 

핵심만 적으니 간단하다.

 

 

 

처음 배우시는 분들은 app.js 파일에 바로 코드를 때려박는 경우가 있는데... 그러한 방식보다 위의 방식으로 파일을 하나 더 만들어서 하는 것이 좋다. app.js파일에 다적으면 react쓰지말고 그냥 html 하나에 다 때려박는거랑 같다. 컴포넌트의 장점은 재사용이기 때문에 재사용을 위해 만드는 기능 별로 컴포넌트를 만들어서 사용하자.

 

 

다음은 Hook에 대해 알아보자. 이것도 쉽다.

 

[Web/React] - [react web] Hook 기초_useState

[Web/React] - [react web] 데이터 다른 컴포넌트로 보내기