[포스코x코딩온] 웹 풀스택 과정 7기 9주차 수요일 회고
포스코 코딩온 웹 풀스택 과정 7기 9주차 수요일 회고
React
드디어 React 강의가 시작됐다.
React를 직접 써본 적은 없지만, 어느정도 예습을 한 덕분에 큰 문제 없이 따라갈 수 있었다.
React 앱 생성
React 앱은 npx create-react-app 명령어로 간단하게 생성할 수 있다.
TS를 이용하기 위해서는 --template typescript 옵션을 추가하면 된다.
이후 루트 디렉토리에서 npm start 명령어를 통해 앱을 실행할 수 있다.
JSX
JSX는 JS에서 HTML을 사용할 수 있게 해주는 문법이다.
필수는 아니지만 JSX를 사용하면 코드의 가독성이 높아지고, 컴포넌트를 작성하기 편해진다.
JSX로 작성된 코드는 JSX.Element 타입을 반환한다.
해당 타입을 반환하며, 이름이 대문자로 시작하는 함수는 컴포넌트가 되어 <컴포넌트이름 /> 형식으로 JSX 내에서 간단히 사용할 수 있다.
대부분은 HTML과 비슷하지만, class 속성을 className으로, for 속성을 htmlFor 로, onsomeevent 를 onSomeEvent 로 작성해야 한다.
앞의 2개는 JS의 예약어이기 때문에, 뒤의 1개는 JS의 네이밍 규칙에 따른다.
또한, JSX 내에서 JS를 사용할 때는 {}로 감싸서 사용한다.
그리고 컴포넌트의 이름은 꼭 대문자로 시작해야한다.
함수형/클래스형 컴포넌트 정의
함수형 컴포넌트는 function 컴포넌트명() {} 형식으로 정의하며, 클래스형 컴포넌트는 class 컴포넌트명 extends React.Component {} 형식으로 정의한다.
클래스형 컴포넌트는 render() 메서드 내에서 JSX를 반환해야 하며, 함수형 컴포넌트는 JSX를 반환한다.
클래스현 컴포넌트는 props를 사용할 때 this.props 형식으로 사용하며, constructor 메서드에서 super(props)를 호출해야 한다.
또한 state를 사용할 때 this.state 형식으로 사용한다.
이런 불편함 때문에 대부분 클래스형 정의 대신 함수형 컴포넌트 정의를 사용한다.
Props
컴포넌트에게 데이터를 전달할 때 사용하는 것이 Props이다.
말 그대로 속성 Properties 로, HTML 요소의 속성처럼 넘겨주면 컴포넌트 내에서 사용할 수 있다.
함수형 컴포넌트에서는 function 컴포넌트명(속성) 형식으로 정의한 뒤, <컴포넌트명 속성명={속성값} /> 형식으로 넘겨주면 컴포넌트 내에서 속성.속성명 으로 사용할 수 있다.
구조 분해 할당을 이용하면 더 쉽게 사용할 수 있다.
State
컴포넌트 내에서 관리하는 데이터를 State라고 한다.
State는 useState 함수를 통해 정의할 수 있으며, useState 함수는 값과 그 값을 변경할 수 있는 함수가 담긴 배열을 반환한다.
함수형 컴포넌트 내에서는 보통 const [상태값, 상태변경함수] = React.useState(초기값) 형식으로 사용한다.
상태를 변화시키기 위해서는 상태변경함수(변경할값) 형식으로 사용한다.
만약 변경할 값이 이전 값에 달려있을 경우, 상태지정함수((이전상태매개변수) => 변경할값) 형식으로 함수를 넘겨 변화시킬 수 있다.
상태가 변경되면 컴포넌트가 자동으로 다시 렌더링되므로, 간단하게 웹사이트에 변화를 줄 수 있다.
반복문으로 컴포넌트 렌더 시
반복문으로 컴포넌트를 렌더할 경우, key 속성을 지정해야 한다.
예를 들어 const 배열 = [1, 2, 3, 4, 5]라는 배열이 있을 때, 배열.map((항목) => <컴포넌트 key={항목} />) 형식으로 사용한다.
만약 배열 내 값이 고유한 값이 없다면, 많은 경우 arr.map((항목, 번호) => <컴포넌트 key={번호} />)처럼 index 값이 들어오는 map 함수의 두번째 인자를 사용한다.