React 기본

우선 React 프로젝트를 시작 할 때, create react app을 이용하면 간편히 시작 가능하다.
npx create-react-app my-app 이라고 쳐주면 알아서 React 개발에 필요한 것들을 전부 설치해준다.

React에서는 JSX라는 JS 확장 문법을 이용한다.
JSX는 JS 안에 HTML을 섞어놓은 것 같은 느낌의 문법인데, 내가 여기에 주저리주저리 적느니 공식문서 링크를 거는 것이 낫겠다.
직접 간단한 페이지를 작성해보니 별도의 HTML 파일 없이 js와 css 파일만으로 웹페이지가 완성되어 상당히 신기했다.
HTML 파일과 js파일을 왔다갔다 하며 작성할 필요가 없어서 더 편하게 느껴졌다.
JSX를 사용하지 않고도 React를 사용할 수 있다고 하는데, 솔직히 좀 상상이 되지 않는다. 그럴거면 굳이 React를? 싶기도 하고...

JSX안의 HTML 태그 비스무리하게 생긴 부분을 엘리먼트라고 하는 것 같은데, 그 안에도 중괄호를 이용하여 JS 표현식을 쓸 수 있다.

React에서는 컴포넌트라는 단위로 개발을 하는데, DOM에서 일반적으로 쓰는 페이지단위 작업 대비 기능별로 쪼개서 개발이 가능하고 그 때 그 때 필요한 컴포넌트만 불러서 렌더링 할 수 있기에, 가독성과 효율이 좋은 것 같다.

Fragments를 이용하면 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있다.

컴포넌트 안에서 props를 다룰 때, 함수에서 props 안의 값을 이용하는 것은 얼마든지 상관 없으나, props 자체를 수정하는것은 하면 안된다는 엄격한 규칙이 하나 있다.

컴포넌트에서 조건부로 렌더링을 하고 싶을 때, 컴포넌트의 return문 안에서는 js의 if문을 쓸 수 없다. 그럴 때는 && 연산자나 삼항연산자를 이용한다. 자세히는 공식문서 참조

반복문으로 배열 내용을 렌더링 하고 싶을 때는 .map을 이용한다. 마찬가지로 공식문서 참조

컴포넌트에는 props와 state가 있는데, props는 한 번 설정해두면 바꿀 일이 없는 값들을 말하고, state는 유동적으로 바꿀 수 있는 값들이다. state를 설정하기 위해서는 컴포넌트를 class로 선언해야 한다.(최신 React에서는 꼭 그렇지 않아도 된다고 하나, 아직 배우지 않았다.)

state에 있는 값을 변경할 때, 직접 this.state.xxx = 'yyy' 같은 식으로 변경하면 컴포넌트에 반영되지 않는다. this.setState를 사용해야 한다.

이벤트를 처리할 때 this.setState를 사용하려는 경우, this.setState를 포함하고 있는 method를 constructor 안에 this.method = this.method.bind(this) 라는 식으로 this를 bind 해줘야 제대로 작동한다.

<button onClick={this.handleClick.bind(this)}>

같은 식으로도 가능하다.

state를 지속적으로 변화시키는, setInterval 같은 함수를 이용시, componentDidMount와 componentWillUnmount를 이용하여 컴포넌트가 삭제되었을 때 메모리를 비워주도록 만들어야 한다. State와 생명주기 공식문서 참조.