React Componentf란? 23.11.03

오늘은 리액트 개인 과제가 주어졌고 수준별 분반 강의를 들었다 

 

먼저 리액트 컴포넌트에 대해 알아봤다

 

1. React Component 란?

 

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 볼 수 있다

개념적으로 컴포넌트는 JavaScript 함수와

비슷한 편. “props”라고 하는 임의의 입력을 받은 후,

화면에 어떻게 표시되는지를 기술하는

React 엘리먼트를 반환한다

---

 

리액트 컴포넌트는 리액트 라이브러리에서 사용되는 기본 빌딩 블록으로 개발자가 재사용 가능하고 모듈식 UI 요소를 만들 수 있는 컴포넌트 기반 아키텍처로 유명하다 두 가지 유형의 리액트 컴포넌트가 있다.

 

간단 요약

결론적으로 리액트 세계에서 말하는 컴포넌트(블록)는 즉 함수입니다.
누군가 와서 “컴포넌트를 만들어 보세요"라고 한다면 우리는 html을 return 하는 함수를 만들면 됩니다. 

---

1. 함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같다.
function App () {
	return <div>hello</div>
}

 

2. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

두 가지 모두 기능상으로는 동일하지만 공식 홈페이지에서는 함수형 컴포넌트 사용을 권장 중에 있다
(실제 현장에서도 함수형을 더 많이 쓴다고 한다...) 그런 이유로 이번에는 함수형 컴포넌트를 배우게 됐다.

 

---

Component 보는 방법

컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편합니다. 컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있습니다.

컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있습니다. 여러분이 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성합니다.

그리고 return을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX입니다.)을 작성할 수 있습니다.

여기에 작성한 html 코드와 값들이 화면에 보입니다.

 

실제 위에 사진과 설명을 참고하면서 컴포넌트를 만들어 보았다

스타일 칸을 보면 {} 중괄호가 2번 쓰워져있는데 저건 JSX문법에서 스타일을 객체 (key : value) 형식으로 표현하기 때문이다

JSX 쟉스라는 html과 비슷한 문법을 사용하며 그 외에도 몇 가지 주의 사항이 있다

1. 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 합니다.

2. 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는

카멜케이스로( 대문자 소문자 섞인 모습이 마치 낙타같다해서 지어진) 이름을 짓습니다.

 

 이제 git 터미널에서 yarn start를 해주면 작동이되야 하는데...!

오류 발생 

갑자기 에러가 발생하며  'start'라는 커맨드도 적용되지가 않았다 '

구글링도 해보고 안 되겠다  제이슨(json) 패키지도 다시 설치하고, 전부 삭제 후 재설치도 해보았지만 결론은....

해결 과정 :  위치 설정 오류 [cd (폴더위치)]  를 잡아주니 정상적으로 작동했다

너무 간단하게 해결돼서 어이없긴 했지만 항상 등잔밑이 어둡나 보다...

화면은 아주 간단하다 JSX는 처음 사용해 보았는데 html이랑은 거의 비슷한 편이었다 

---

부모-자식 컴포넌트

컴포넌트 안에 컴포넌트 넣기

컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고,

다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부릅니다.

 

App.js 폴더에서 "아들"이라는 새로운 컴포넌트를 만들었고 아들을 ->흥부인 ->산타할아버지 -> APP 컴포넌트 안에 차례대로 집어넣었습니다 이렇게 코드를 작성하면, 화면에는 “아들까지 완료”라는 문장이 보이게 될 것입니다.

왜냐하면이 파일에서 내보내진 (우리는 “내보내진”이라는 것을 export default라고 하기로 했습니다.)

컴포넌트는 App 컴포넌트 이기 때문에 App 컴포넌트가 화면에 보입니다. 하지만

App 컴포넌트는 산타할아버지 컴포넌트를 자식으로 삼고 있죠!

산타-흥부인-아들 순서로 자식으로 삼고 있고 그래서 리액트 화면에서 정상적으로 아들의 return <div> “아들까지 완료”  </div>가 나오는 것을 볼 수 있습니다.

 

이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보이게 할 수 있습니다. 앞으로는 “화면에 보여지게 하다"를 줄여서 Rendering이라고 부르겠습니다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 우리는 앞으로 JSX라고 부를 것입니다.

 

여기까지 컴포넌트에 대해서 정리해보았다 아직 갈길이 멀지만...그래도 계속 해봐야겠다