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

[참고]

자습서 - React 시작하기

ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

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

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

---

[자동 새로고침]

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

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

okky.kr/article/546683

OKKY | React live-reload 비활성화하는 방법이 궁금합니다.

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}",
			"}\n"
			
		],
		"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}\n",
			"\trender(){",
			"\t\treturn (",
			"\t\t\t$0",
			"\t\t);",
			"\t}",
			"}\n"
			
		],
		"description": "react component class with constructor"
	},

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

생성 ) 파일 > 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로 조회 불가.

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

<li key={user.id}> Name : {user.name}</li>

 

 

[기타 관습적인 것들]

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

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

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