컴포넌트 연습
컴포넌트 연습을 하기 위해 src 폴더 안에 components 폴더를 만들어 컴포넌트를 관리하려고 한다.
하지만 App.js도 컴포넌트라며 왜 components 폴더로 이동하지 않는가 궁금할 수 있다.
이는 App.js가 특별한 컴포넌트가 될 것이기 때문인데 코드에 관한 것은 아니고 응용 프로그램에서의 역할 때문이다.
루트 컴포넌트가 되는데 index.js 의 시작 파일에서 렌더링 되는 주요 구성 요소임을 의미
그리고 모든 컴포넌트들은 App.js안 또는 다른 컴포넌트 안에 중첩되고 또 중첩될 것.
이는 컴포넌트 트리를 만들기 때문
컴포넌트 트리
이 중 가장 상단에 있는 컴포넌트만이 리액트 돔 렌더의 지시로 html페이지에 직접 렌더링 됨.
다른 모든 컴포넌트들은 이와 같은 지침으로 렌더링 되진 않고 컴포넌트 html코드 안에 있는 보통의 html요소들을 사용해서 렌더링 될 것.
컴포넌트 연습 계속
컴포넌트 폴더에 파일을 하나 만드는데 원하는 이름으로 만들 수 있지만 몇가지 관례가 있다.
리액트 프로그램에서 이름을 만들 때는
- 대문자로 시작하는 한 단어
- 한단어 안에 여러 단어를 결합하면 카멜케이스 적용(ExpenseItem <-처럼 중간에 들어가는 단어 시작인 i를 대문자로 사용)
- 파일명과 같은 데이터를 렌더링 하는 컴포넌트
한마디로 파일 이름을 보면 어떤 로직과 Html 파일이 안에 있을지 알 수 있도록 해야한다.
리액트로 작성된 컴포넌트는 어떤 것일까?= 단지 자바스크립트 함수
이 때 함수 이름은 관습상 파일이름 반복 사용
이후
이런식으로 App.js에서 import 시켜 html 구문처럼 사용할 수 있다.
내장된 html 요소와 다른 중요한 점은 소문자로 시작하는 것이 아닌 대문자로 시작한다는 것 뿐
그리고 사용자 지정 컴포넌트는 반드시 대문자로 시작해야 하는 것(JSX코드를 사용할 때)
리액트가 적용하는 간단한 규칙으로는 소문자로 시작하는 요소는 내장된 html요소이기 때문에 내장 요소로 찾을 것. 때문에 대문자로 시작하는 요소는 개발자들에 의해 정의된 요소이다.
순서를 그대로 기억하자!!
Html 코드를 리턴하는 함수인 컴포넌트를 생성해서 내보내면 되고 그런다음 사용하고 싶은 파일에서 임포트 한다.
그리고 JSX코드에서 대문자로 시작하는 html요소처럼 사용!
