제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React로 전환 중인 JavaScript 개발자
- TypeScript와 React Hooks에 대한 기본 지식이 있는 개발자
- 중간 수준의 프론트엔드 개발자
핵심 요약
- React에서 화살표 함수 사용:
this
바인딩 없이 이벤트 핸들러 작성 가능 (this
가 자동으로 컴포넌트 인스턴스를 참조) - 템플릿 리터럴 활용: 동적 CSS 클래스나 JSX 텍스트 생성 시 가독성 향상 (
${expression}
형식) - 디스트럭처링:
props
와state
에서 필요한 값 추출로 코드 간결화 ({name, age}
형식) - 스프레드/레스트 연산자: 불변성 유지 및 props 전달 시 효율적 사용 (
...prevItems
/...rest
형식)
섹션별 세부 요약
- 화살표 함수
- React에서 이벤트 핸들러로 사용 가능하며
this
바인딩 필요 없음 - 클래스 컴포넌트에서
handleClick = () => {...}
형식으로 메서드 정의 가능 - 함수형 컴포넌트에서
onClick={() => setCount(...)}
형식으로 사용 시 코드 간결화
- 템플릿 리터럴
alert ${type === 'error' ? 'alert-error' : 'alert-success'}
형식으로 CSS 클래스 동적 생성- 문자열 연결(
+
) 대신 가독성 향상된 템플릿 리터럴 사용 가능 - JSX 내에서 여러 줄 텍스트를 쉽게 작성 가능
- 디스트럭처링
const { name, age } = this.props
형식으로props
값 추출useState
에서const [count, setCount] = React.useState(0)
형식으로 상태 값 명확히 정의props
와state
에서 중복된this.props.x
참조를 줄임
- 스프레드/레스트 연산자
setItems(prevItems => [...prevItems, item])
형식으로 불변성 유지...rest
를 통해props
전달 (형식)
function logValues(message, ...values)
형식으로 가변 인자 처리
결론
- React 개발 시 화살표 함수로 this
바인딩을 생략하고 이벤트 핸들러 작성
- 템플릿 리터럴을 사용해 동적 문자열 생성 시 가독성과 유지보수성 향상
- 디스트럭처링을 통해 props
및 state
에서 필요한 값만 추출해 코드 간결화
- 스프레드 연산자로 불변성 유지 및 props
전달, 레스트 연산자로 가변 인자 처리 시 유연한 함수 작성 가능