react 컴포넌트

react 의 핵심은 re-render(리랜더) 와 Components(컴포넌트)입니다

 

< Components(컴포넌트) >

 

한가지 이상의 기능을 수행하는 UI 단위

기존에 있던 html을 쪼갠 느낌입니다. html을 통으로 다 작성하면 보기도 힘들고 작성할 때 불편함이 있어 여러 컴포넌트로 나누어 작성하는 것입니다

 

 

< Re-render(리랜더) >

 

업데이트 이전의 가상 돔트리와 업데이트 이후 가상 돔트리 상태를 비교하여 업데이트 된 내용이 있다면

컴포넌트를 사용자의 화면에 구성할 때 사용합니다
사용자 화면을 구성할 때 사용하는 render 함수를 다시 호출하는 것이 Re-render(리랜더)입니다

 

 

컴포넌트는 말그대로 부분부분 따로 작업해 붙이는 느낌인데 

 

 

이렇게 div 구조가 있다 하면 헤더는 헤더 컴포넌트로, 중앙 바디는 바디 컴포넌트로 , 하단 푸터는 푸터 컴포넌트로 나눠 따로따로 작업을 합니다

 

더 잘게 쪼갠다 하면 헤더에 로고 컴포넌트, 카테고리 컴포넌트, 내정보 컴포넌트 등 한 구조 안에서 나눌 수 있는대로 나눠 만드는걸 컴포넌트라 생각하면 될 것 같습니다

 

조원들과 현재 컴포넌트 쪼개는 연습을 하는 중인데 그 부분으로 보여드리겠습니다

저희의 최종 결과는 2차프로젝트로 했던 중고나라 홈페이지를 컴포넌트로 쪼개어 작동 가능하게 하는 것까지입니다

 

 

먼저 기본 설정까지 마친 리액트 파일(파일명은 본인이 원하는대로)을 들고 시작합니다

 

 

 

pages와 components 폴더를 만들어주고 웹브라우저에 표시될 main.js 파일을 pages 폴더에 만들어줍니다

html 파일이라고 보시면 편해요

그리고 components 폴더에는 html 구조를 쪼갤 파일들을 만듭니다

ex) header, body, footer...

이제 main.js를 작성합니다

 

 

메인은 클래스를 한 곳에 집어넣는 거랑 비슷합니다

한 파일에 여러 컴포넌트를 집어넣어야 하기 때문에 Main 함수를 선언해주고 함수 안에서 각 div구조 부분에 맞는

컴포넌트를 넣어 리턴해줍니다

 

import "임포트할 파일경로"

const "함수명" = () => {
	return "리턴값"
}

export default "함수명"

기본적인 문법입니다 여기에 가지고 올 파일내용을 경로로 지정해 가져오고 리턴값에 지정된 파일의 함수를 작성하면 그 부분에 작성된 함수내용이 그대로 출력됩니다

저는 잘 작동되는지 확인해볼려고 4개의 컴포넌트로 구성했는데 제대로 실행이 되면 세부적으로 나눠서 해볼 생각입니다

 

 

이제 메인 코드는 작성했으니 components 폴더에 header.js 파일을 만들어줍니다

 

저희 조가 만든 중고나라 홈페이지는 헤더가 두 줄로 되어있어 헤더 파일에 하위 컴포넌트를 두개 만들겁니다

components 폴더에 따로 headercomponents 폴더를 만들고 그 안에 헤더에 사용될 부분들을 파일로 만들었습니다

first_header에 사용될 logo.js, info.js, search.js를 만들어 넣을려고 합니다

 

 

first_header함수에 넣으려던 js파일을 순서대로 넣었습니다

똑같이 import해주고 함수도 필요한 파일 넣어주고 export까지 해주면 기본적인 코드가 됩니다

그리고 export 하단에 변수를 지정해줌으로써 css도 만들 수 있습니다

 

상단 import에 styled-components를 넣어주고 하단에 styled와 css를 넣을 태그를 정해주면 그 부분에 css를 주는게 가능합니다

 

입력을 마치고  dev로 새로운 포트로 설정했기 때문에 "npm run dev" 명령어를 통해 웹브라우저로 들어가줍니다

 

적용이 잘 되었습니다 굿굿

 

이런식으로 전체적인 div를 다 잡아주고 js까지 마무리 해주면 원래의 홈페이지가 나올 거 같습니다

여기까지 작성하는 데에도 조원들끼리 헤매면서 왔습니다 너무 어렵네요

열심히 공부하겠습니다