1. React 컴포넌트🧩
01. 컴포넌트 Components 란?
UI를 재사용이 가능한 개별 조각으로 나누어, 개별적으로 관리하는 것을 뜻한다. JavaScript의 함수처럼 작동하며, props를 입력받아 React 엘리먼트를 반환 한다. 즉, 컴포넌트는 데이터( props )를 입력받아 상태에 따라 DOM Node( React 엘리먼트 )를 출력하는 함수이다.
과거 웹 페이지는 웹 개발자가 컨텐츠를 마크업(html)한 다음 JavaScript 코드를 넣어 상호작용이 가능하도록 추가하는 방식이었지만, 이는 많은 사이트와 앱에서 상호작용을 해야하는 현재와 적합하지 않다.( 소셜미디어를 생각해보자! 수많은 데이터의 생성/수정/삭제가 동시에 이뤄지고 있다. ) 그래서 React는 이미 작성한 컴포넌트를 재사용하여 많은 디자인을 구성하는 컴포넌트 기반 체계를 사용하고 있다.
02. 함수형 컴포넌트
컴포넌트를 정의하는 가장 간단한 방법으로, JavaScript 함수와 유사하다.
//함수형 컴포넌트의 구성
const App = () => {
//1. 컴포넌트 표현과 관련된 JavaScript 코드 작성
return(
//2. JSX 영역 : React 엘리먼트 반환 (html과 유사)
)
}
//example
const Welcome = (props) => {
return (
<h1>Hello, {props.name}!</h1>
);
}03. 클래스형 컴포넌트
ES6문법의 Class 문법을 사용하여 컴포넌트를 정의할 수 있다.
//클래스형 컴포넌트의 구성
class App extends React.Component {
// 생성자 함수
constructor(props) {
super(props);
}
//render 함수 (필수!)
render() {
return (
React 엘리먼트 반환
)
}
}
//example
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}04. Naming Conventions
- component 파일 :
Pascal case▶️ Header.jsx - Non-component 파일 :
Camel case▶️ fetchApi.js - css 파일 :
Pascal case▶️ Header.css - 폴더 :
Camel case또는Kebab case
05. 주의사항
- 컴포넌트의 이름은 대문자로 시작해야한다. 그렇지 않으면 작동이 안된다. 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.
- return 뒤에 괄호가 없으면, 뒷 라인에 있는 모든 코드는 무시된다.
// 잘못된 예시
return
<div>Hello</div>; // 이 코드는 실행되지 않음
// 올바른 예시
return (
<div>Hello</div>
);
- 컴포넌트 안에 다른 컴포넌트를 정의하면 안된다. 최상위 스코프에서 컴포넌트를 정의해야한다.
- 자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우, props로 전달해야한다.
//잘못된 예시
function Parent() {
...
function Children() {
...
}
}
//정확한 예시
function Parent() {
// ...
}
function Children() {
// ...
}2. JSX📄
01. JSX 란?
JSX는 JavaScript를 확장한 문법으로, JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 한다. 즉, 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 하지만 JSX는 HTML이 아니며, React가 JavaScript로 컴파일하여 DOM을 조작한다.
02. HTML ▶️ JSX 변환
HTML 마크업 방식으로 JSX에 그대로 작성하면 오류가 발생한다. JSX는 브라우저가 'babel'을 이용해 JS처럼 인식하기 때문에 특별한 규칙(아래 참조)이 존재한다.
변환기를 사용하면 간편하게 적용할 수 있다.
03. JSX 규칙
- 하나의 루트 엘리먼트로 반환해야한다. 즉, 반드시 부모 요소 하나가 감싸는 형태여야 한다.
*마크업에 div 태그를 추가하고 싶지 않다면, 빈태그<> </>로 대체 가능하다.
//잘못된 예시
...
return(
<div> 첫번째 줄입니다.</div>
<div> 두번째 줄입니다.</div>
)
//정확한 예시
...
return(
<>
<div> 첫번째 줄입니다.</div>
<div> 두번째 줄입니다.</div>
</> //<= 부모태그로 감싸주기
)- 모든 태그는 닫아주어야 한다.
- JavaScript 표현식을 사용할 때에는
{}안에 넣어준다. - JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신
Camel case프로퍼티 명명 규칙을 사용한다. - 태그에 id를 줄 때는
id=""로 표기하고, class를 줄 때는className=""으로 표기한다.
*Class 문법과 혼동되지 않기 위함이다. - 스타일을 지정할 때는
{{}}이중 중괄호를 사용한다. JS 문법 + 객체로 속성이 들어가기 때문이다. 스타일 지정은 인라인으로 작성하는 방법과 JS 영역에 객체로 제작하여 넣는 방법이 있다.
//스타일 지정 - 인라인
const App = () => {
return(
<div style={{backgroundColor: "red", color: "white"}}></div>
)
}
//스타일 지정 - 객체로 제작
const App = () => {
const makeRed = {
backgroundColor: "red",
color:"white",
}
return(
<div style={makeRed}></div>
)
}if구문과for구문은 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다. 그렇기 때문에,{}안에서 삼항 연산자를 주로 사용 한다.
const App = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
};- 주석은
{/* 코멘트 */}으로 표기한다.
