진정한 방학(제주 여행) 가기 전에 밀린 블로그를 쓰며..
드디어 혼공스를 마무리 하려고 한다.
마지막 단원.. 리액트 맛보기!!
리액트 수업을 따라가진 못했지만, 혼공스를 시발점으로 천천히 공부해야겠다는 생각을 했다. 아직 난 갈 길이 멀지만!!! 그래도 두달 반이라는 코딩 교육을 끝내고 벌써 휴강기간이다!!
많은 사람들이 휴강기간에 공부를 하겠지만, 나는 더 재밌게 놀아주겄어~~ㅎㅎㅎ
제주도 갔다와서 담주 월요일부터 노마드 챌린지 + 공인중개사 실무교육을 달려야 되기 때문에!!! 후회없이 놀고 오마!! 움하하!!
★ [혼공JS] 10단원 - 리액트 라이브러리 맛보기
★ 용어 정리
- 리액트 라이브러리
: 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와주는 자바스크립트 라이브러리
-
리액트를 사용하기 위해서는 HTML 파일에서 3개의 자바스크립트를 읽어들여야 함
-
컴포넌트(component) : 화면에 출력되는 요소
-
루트 컴포넌트(root component) : 가장 최상위에 배치하는 컴포넌트
-
컴토넌트 생성하기
<컴포넌트 이름></컴포넌트 f이름>
-
컴포넌트 출력하기
ReactDOM.render(컴포넌티, 컨테이너)
- div#root를 선언하지 않았다면 화면에는 아무 것도 뜨지 않음
★ JSX 기본 문법
- JSX : 자바스크립트 코드 내부에서 HTML 태그 형태로 컴포넌트를 만들 수 있게 해주는 자바스크립트 확장 문법
- 단순하게 태그를 만드는 기능 이외에도 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공함
- 표현식을 출력할 때는 {...} 기호를 사용함
- 다만 속성으로 표현식을 출력할 때는 따옴표를 사용하면 안 됨
- 표현식 출력하기
<태그>{표현식}</태그>
<태그 속성={표현식} />
★ 클래스 컴포넌트
: 클래스로 만드는 컴포넌트
class 컴포넌트 이름 extends React.Component {
render ( ) { return<h1>출력하는 것</h1>}
}
-> React.Component 클래스는 화면에 무언가를 출력할 때 render( ) 메소드를 호출함. 이를 오버라이드래서 원하는 것을 출력함
- 클래스 컴포넌트를 사용하면 클래스 메소드 내부에서 this.props 속성을 사용할 수 있음. 이 속성은 컴포넌트를 선언할 때 전달함
class App extends React.Component {
constructor (props) {
super(props)
// 생성자 코드
}
render ( ) {
// 출력할 것
}
componentDidMount ( ) {
// 컴포넌트가 화면에 출력될 때 호출
}
componentWillUnmount ( ) {
// 컴포넌트가 화면에서 제거될 때 호출
}
- 함수 컴포넌트 : 함수로 만드는 컴포넌트
★ state 속성
- state 속성에는 출력할 값을 저장하며, state 속성 값을 변경할 때는 반드시 setState( ) 메소드를 사용함
// 상태 선언하기(생성자 위치)
this.state = { 속성: 값 }
// 상태 변경하기(이외의 위치)
this.setState({ 변경할 속성: 값 })
★ 이벤트 연결하기
class App extends React.Component {
constructor (props) {
super(props)
this.메소드 이름 = this.메소드 이름.blind(this)
-> (2) 메소드에 this 바인드
}
render ( ) {
return<h1 이벤트 이름={this.메소드 이름}></h1>
-> (3) 이벤트 연결
}
메소드 이름 (event) { // 이벤트가 호출될 때 실행할 코드 }
}
-> (1) 메소드 선언
★ 긍정의 한줄
인생은 거울과 같으니, 비친 것을 밖에서 들여다 보기 보다 먼저 자신의 내면을 살펴야 한다. - 월리 '페이머스' 아모스 -
휴가 시작~~~ 갔다와서 후기 쓰겠습니다!!
그럼 20,000 ~
