React.js
- 컴포넌트 기반 아키텍처
- 가상 DOM → 리렌더링 성능 향상
- 선언적 접근 방식
- 상태가 어떻게 변화하는지, 그리고 그 변화에 따라 어떤 UI가 보여야 하는지를 정의 - 강력한 커뮤니티와 생태계
React 개발환경
- 윈도우 기준 win + r → cmd (터미널) 실행 후 아래 코드를 차례로 입력
- node.js, npm 먼저 설치되어 있어야 하므로 -v로 버전이 잘 출력되면 react 설치 진행
// 설치 확인
node -v
npm -v
// react 초기 환경 설정
npm install -g create-react-app
// react 프로젝트를 만들 디렉토리로 이동 (ex. cd Desktop)
// npx [설치한거] [프로젝트명]
npx create-react-app react-study
- 인텔리제이 얼티메이트
- 새 프로젝트 - 제너레이터 - React
React 컴포넌트
- 컴포넌트는 재사용 가능한 코드의 묶음이며, 각각의 컴포넌트는 독립적인 기능을 수행
- 가능한 작은 컴포넌트를 작성하도록 권장
- 컴포넌트의 종류에는 크게 함수 컴포넌트, 클래스 컴포넌트가 존재
- 컴포넌트는 props와 state라는 두 가지 데이터를 사용
* Props(Properties) : 부모 컴포넌트로부터 자식 컴포넌트에게 전달되는 데이터, 읽기 전용
* State : 컴포넌트의 내부 상태를 관리하는 데이터, State는 컴포넌트 내에서 변경이 가능하며 재렌더링됨
클래스 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
→ 최근에는 리액트에서 권장하지 않음 (함수형 권고)
함수 컴포넌트
- JavaScript 함수
- props 객체를 매개변수로 받고 React 요소를 반환
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
컴포넌트 장점
- 재사용성: 컴포넌트를 한 번 정의하면 여러 곳에서 재사용 가능
- 분리: 각 컴포넌트는 독립적이므로 코드는 분리되고 모듈화
- 관리: 복잡한 UI를 작은 부분들로 분리하여 개발하여 유지보수가 편리
JSX 문법
JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, 리액트 요소를 생성
1. return 안에 있는 태그는 반드시 하나의 태그로 묶여야 함 (하나의 루트 태그만 존재)
2. 빈 태그(닫는 태그가 없는)는 반드시 />로 마감
3. 태그의 class 속성은 자바스크립트 키워드 class와 겹쳐서 className으로 표기
4. 의미없는 부모는 <React.Fragment>로 감싸면 됨
5. 변수값이나 함수를 출력할 때는 {}로 감싸면 됨
React props
- React에서 "props"는 속성(properties)을 의미
- 컴포넌트 간에 데이터를 전달하는 메커니즘을 제공
- React의 주요 특징 중 하나인 단방향 데이터 흐름을 지원
- 즉, 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달
function List(props) {
const items = props.items;
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
function App() {
return <List items={['Apple', 'Banana', 'Cherry']} />;
}** "List" 컴포넌트는 배열을 props로 받습니다. 배열 내 각 요소를 순회하며 리스트 항목을 생성
React의 props.children
- props.children은 컴포넌트의 opening 및 closing 태그 사이에 배치되는 모든 것을 포함
- 컴포넌트를 "포함(Wrapper)" 컴포넌트로 사용하거나, 컴포넌트의 내용을 동적으로 구성하는 데 사용 가능
** 모달의 틀은 유지하면서 내용 변경 시 편리
import React from 'react';
import './Card.css';
const Card = ({ children }) => { // 디스트럭쳐링으로 바로 사용 가능
return (
<div className={'card'}>
{children}
</div>
);
};
export default Card;
React 이벤트 바인딩
- 함수형 컴포넌트에서 이벤트 핸들러는 일반적으로 함수 내부에 작성
- 이 핸들러를 이벤트에 바인딩하기 위해 JSX 문법을 사용
- 이벤트 핸들러 이름은 camelCase를 사용하고, 이벤트 핸들러는 JSX 엘리먼트에 문자열이 아닌 함수로 전달됨
** hadleCick 이벤트 바인딩은 인라인으로 보이지만 실제로는 addEventListener 형태로 바인딩됨
function MyButton() {
// 함수 내부 선언
const handleClick = () => {
console.log('Button was clicked!');
};
return (
<button onClick={handleClick}>
Click me!
</button>
);
}
** 함수 외부에 선언 후 바인딩
- 여러 컴포넌트에서 재사용 가능하지만 컴포넌트의 props, state에 접근할 수 없는 것이 단점
** 인라인 바인딩(화살표 함수)
- 컴포넌트 렌더링될 때마다 새로 생성됨
function MyButton() {
return (
<button onClick={() => console.log('Button was clicked!')}>
Click me!
</button>
);
}
