[React] 리액트 초기세팅 및 실습 1차

[React] 리액트 초기세팅 및 실습 1차

[참고]

자습서 - React 시작하기

ko.reactjs.org/tutorial/tutorial.html

리액트로 tic tac toe 만들면서 실습해보기

코드 : github.com/GoldK11/React/tree/main/practice/tictactoe

[자동 새로고침]

리액트는 코드 변경 후 저장 시 live-reload 기능을 지원한다.

이런 자동 새로고침이 불편해서 비활성화하는 법을 알아봄

okky.kr/article/546683

config/webpack.config.js 파일의

'require.resolve('react-dev-utils/webpackHotDevClient')' 부분을 주석처리

[코드 스니펫]

vscode에서 지원하는 코드 스니펫 기능 사용. 리액트랑 무관하게 vscode 에디터를 사용한다면 다 사용 가능한 기능임.

리액트 클래스형 컴포넌트 선언부 매번 쓰기 귀찮아서 코드조각 만들어 놓음.

일단 생성자 없는 것, 있는 것, 생성자만 따로 추가하게 될 경우 세 가지 정도 등록. 편함.

// javascript.json { "class component" : { "prefix": ["cla", "class", "comp"], "body": [ "class $1 extends React.Component {", "\trender(){", "\t\treturn (", "\t\t\t$0", "\t\t);", "\t}", "}

" ], "description": "simple react component class" }, "constructor class component" : { "prefix": ["classCon", "compCon"], "body": [ "class $1 extends React.Component {", "\tconstructor(props){", "\t\tsuper(props);", "\t\t$2", "\t}

", "\trender(){", "\t\treturn (", "\t\t\t$0", "\t\t);", "\t}", "}

" ], "description": "react component class with constructor" }, "constructor of class component" : { "prefix": ["con", "cosn"], "body": [ "constructor(props){", "\tsuper(props);", "\t$0", "}

" ] } }

생성 ) 파일 > Preferences(기본설정) > User snippets (사용자 코드조각) > 확장자 선택

사용 ) prefix로 등록해놓은 글자 치면 옆에 자동으로 뜬다. 만약 안 뜨면 Ctrl + space

[주의사항]

1. 객체형 (object, array) state의 변경에 주의할것.

- 원본 배열이나 객체의 하위 요소에 직접 접근해 변경하지 말고 독립적으로 복사한 뒤 변경 작업을 완료하고 setState를 통해 통으로 바꿔치기해줘야 함 잊지 말자.

- React의 재 렌더링 조건 주의하기. vue의 watch 조건과 비슷한듯

2. 함수형, 클래스형 컴포넌트 이벤트 핸들러 차이 주의

클래스형 : onClick={() => this.props.onClick()}

함수형 : onClick={props.handleFunc}

3. 리스트 렌더링 시 키값 반드시 할당할 것. ( 배열이나 이터레이터의 자식들 )

- 리액트에서 key는 ref처럼 특별하고 미리 지정된 prop으로 리액트가 자동으로 컴포넌트 업데이트에 사용함.

- this.props.key로 조회 불가.

- 배열의 인덱스를 키로 사용할 수는 있지만 지양하자 (아이템 추가, 제거 시 데이터의 불안정성)

Name : {user.name}

[기타 관습적인 것들]

- 이벤트를 나타내는 prop에는 on[Event], 이벤트를 처리하는 함수에는 handle[Event]를 사용

- 태그에 속성이 두 개 이상 추가되면 줄 바꿈 해주자 (하지만 이게 더 가독성 떨어지는 듯... 현장에서 협의 필요)

- 간단한 컴포넌트 (렌더링 메서드만 가지는 컴포넌트)는 함수형으로 정의하는게 좋은듯

from http://kline1103.tistory.com/55 by ccl(A) rewrite - 2021-01-06 04:27:27