[책] CH10 리액트 라이브러리 맛보기
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.
(이 파트는 대강 정리하고 넘어간다)
목차
리액트의 기본
리액트, 컴포넌트, JSX
요약:
리액트 라이브러리 React Library
: 사용자 인터페이스(UI)를 쉽게 만들도록 도와주는 자바스크립트 라이브러리. 대규모 프론트엔드 웹 애플리케이션 개발을 지원한다. 리액트 네이티브로는 모바일 애플리케이션도 만들 수 있음.
https://ko.reactjs.org/
리액트 라이브러리 사용 준비
HTML 파일에서 자바스크립트 파일 3개를 읽어들인다.
react.development.js react-dom.development.js babel.min.js
바벨을 적용하겠다고 선언하기
: 리액트는 자바스크립트를 확장한 확장 문법을 사용하고, 이를 쓰려면 “이 스크립트에는 바벨을 이용한 확장 문법을 쓰겠다”는 표시를 해줘야 한다.
<script type=”text/babel”></script>
루트 컴포넌트 출력하기
컴포넌트 componenet
: 리액트가 만드는, 화면에 출력되는 요소. HTML과 동일한 문법을 사용한다. 가장 최상위에 배치하는 컴포넌트는 루트 컴포넌트.
컨테이너 container
: 컴포넌트를 출력할 상자.
컴포넌트 생성: <컴포넌트 이름></컴포넌트 이름>
컴포넌트 출력: ReactDOM.render(컴포넌트, 컨테이너)
JSX(JavaScript XML: 자바스크립트 확장 문법)
: 자바스크립트 코드 내부에 HTML 코드를 사용한 것. 웹 브라우저는 읽을 수 없고 바벨이 읽어서 일반적인 자바스크립트 문법으로 변환하고 실행해주는 원리이다.
// 1) JSX문법으로 태그 만들기
<script type=”text/babel”>
const component = <h1>바벨 덕분에 실행할 수 있는 HTML코드</h1>
const container = document.getElementById('root')
ReactDOM.render(component, container)
</script>
<body>
<div id="root"></div>
</body>// 2) JSX문법으로 태그 내부에 표현식 삽입하고 출력하기
(생략)
클래스 컴포넌트
: h1, img태그 등 HTML 표준 태그 외에 사용자가 직접 클래스를 이용해 컴포넌트를 만든 것.
(cf. 함수로 만드는 컴포넌트 = 함수 컴포넌트.)
React.Component 클래스를 상속받고 render() 메소드를 오버라이드해서 원하는 것을 화면에 출력하도록 만들면 된다.
예제) 루트 컴포넌트 출력을 클래스 컴포넌트로 구현하기
예제) 컴포넌트의 속성 사용하기(img 태그에 url 집어넣어 사진 출력하기)
컴포넌트의 기본적인 속성과 메소드
사용자 지정 클래스 컴포넌트를 만들 때 상속받는 React.Component 클래스 중,
자주 (오버라이드해서)사용되는 메소드:
constructor(props) // 일단 super(props)로 부모 생성자를 호출해주고 덧붙인다. render() // 출력할 것 componentDidMount() // 컴포넌트가 화면에 출력될 때 호출 componentWillUnmount() // 컴포넌트가 화면에서 제거될 때 호출
⇒ 아래 두 개를 라이프사이클 메소드(컴포넌트가 내부적으로 특정 상황에 호출하는 메소드)라고 함.
자주 (변경해서)사용되는 속성:
state 속성: 출력할 값을 저장함.
this.state = { 속성: 값 } // 생성자 안에 상태 선언하기 this.setState({ 변경할 속성: 값 }) // 생성자 밖에서 상태 변경하기
예제) 리액트를 활용한 현재 시간 출력 프로그램
컴포넌트에 이벤트 연결하기
- 메소드를 선언한다.
- 메소드에 this를 바인드 한다: this.메소드이름 = this.메소드이름.bind(this)
- render() 메소드에서 출력하는 태그의 이벤트 속성에 메소드를 입력한다.(=이벤트 연결 완료)
이벤트 연결 템플릿
class App extends React.component {
constructor(props) {
super(props)
this.메소드 이름 = this.메소드 이름.bind(this) // 2. 메소드에 this 바인드
}
render() {
// 3. 이벤트 연결
return <h1 이벤트 이름={this.메소드 이름}></h1>
// 1. 메소드 선언
메소드 이름(event) {
// 이벤트가 호출될 때 실행할 코드
}
}
예제) 버튼을 클릭한 횟수를 세는 프로그램
예제) this를 바인딩 하는 다른 2가지 방법
리액트 이벤트 이름 목록:
https://ko.reactjs.org/docs/events.html#clipboard-events
예제) 입력 양식 이벤트
스타일 지정하기
style 속성에 객체를 지정하면 된다.
문서 객체 모델과 비슷하다. font-size: 2px(=CSS) ⇒ fontSize: 2 또는 “font-size”: 2
render() {
const textStyle = { color: 'red', fontSize: 2 }
return <h1 style={textStyle}>글자</h1>
}예제) 체크되어 있을 땐 파랑, 아니면 빨강으로 글시를 출력하는 프로그램
컴포넌트 배열
컴포넌트를 배열에 담아서 render() { … return <ul>{list}</ul> } 식으로 출력할 수 있다.
일반적으로 map()과 함께 사용한다.
리액트와 데이터
컴포넌트끼리 커뮤니케이션하게 만들기
요약:
여러 개의 컴포넌트 사용하기
App 컴포넌트에 Item 컴포넌트 추가
부모에서 자식의 state 속성 변경하기
자식에서 부모의 state 속성 변경하기
리액트로 만드는 할 일 목록 애플리케이션
⇒ 컴포넌트가 2단계로 부모자식 계층을 이루는 상태에서만도 데이터를 주고받게 하기 위해 복잡한 코드가 필요했다. 더 많은 컴포넌트를 추가하려면 Flux 패턴을 이용해야 한다.
React Flux 패턴
: 리액트로 데이터를 쉽게 교환하기 위해서 만들어진 디자인 패턴. (Redux같은 애들)
Flux 패턴을 활용할 수 있게 해주는 라이브러리를 사용하면 데이터를 쉽게 관리할 수 있다. (MobX 라이브러리 등)
디자인 패턴 design pattern
: 효율적으로 프레임워크를 개발할 수 있게 고안한 패턴. 개발하는 과정에서 빈번하게 발생하는 문제들이 발생했을 때 해결책을 재사용할 수 있도록 만든 패턴이다.
참고:
[책] 혼자 공부하는 자바스크립트 - 윤인성
Uploaded by N2T