• 컴포넌트 배열

• key

• 응용

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다.

• ref는 어떤 상황에서 사용해야 할까?

• ref 사용

• 컴포넌트에 ref 달기

• 참고 :
  리액트 컴포넌트 안에서도 id를 사용할 수 있지만, 특수한 경우가 아니라면 사용을 권장하지 않음.
  예를 들어 같은 컴포넌트를 여러 번 사용한다면 중복 id를 가진 DOM이 여러 개 생기니 잘못된 사용이 됨.

  ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않음.

• 리액트의 이벤트 시스템
  • 이벤트 사용 시 주의사항

• 이벤트 핸들링 익히기

• 함수형 컴포넌트로 구현

컴포넌트를 선언하는 방식은 두 가지입니다.
하나는 함수형 컴포넌트이고 또 다른 하나는 클래스형 컴포넌트입니다.

• 클래스형 컴포넌트
  • 함수형 컴포넌트

• 컴포넌트 생성
  • src 디렉터리에 MyComponent.js 파일 생성
  • 코드 작성
  • 모듈 내보내기(export) 및 불러오기(import)

• props

  • JSX 내부에서 props 렌더링
  • 컴포넌트를 사용할 때 props 값 지정하기
  • props 기본값 설정: defaultProps
  • 컴포넌트 태그 사이의 내용을 보여주는 children
  • 비구조화 할당 문법을 통한 props 내부 값 추출
  • propTypes를 통한 props 검증
  • 클래스형 컴포넌트에서 props 사용하기

• state

  • 클래스형 컴포넌트의 state
  • 함수형 컴포넌트에서 useState 사용하기

• state 사용시 주의 사항

리액트 컴포넌트에서 사용하는 JSX 문법

• JSX란?

• JSX의 장점

• JSX 문법

  • 감싸인 요소
  • 자바스크립트 표현
  • if 문 대신 조건부 연산자(삼항 연산자)
  • AND 연산자(&&)를 사용한 조건부 렌더링
  • undefined를 렌더링하지 않기
  • 인라인 스타일링
  • class 대신 className
  • 꼭 닫아야 하는 태그
  • 주석

리액트 기초

리액트는 페이스북 개발 팀이 만든 자바스크립트 라이브러리입니다.

기존의 어떤 데이터가 변할 때마다 어떤 변화를 주는 방식이 아닌 기존 뷰를 날려 버리고 새로 렌더링하는 방식입니다.

Prettier 란?

VS Code Extension 중의 하나인 Prettier는 코드 스타일을 자동으로 정리해주는 도구입니다.

들여쓰기(공백 문자), 세미콜론(;)이 빠진곳, 작은따옴표(‘’)등을 자동으로 추가 및 변경해줍니다.

ESLint란?

JavaScript 문법 검사 도구로 사용자가 직접 정의한대로 코드를 점검하고, 에러가 있으면 표시해줍니다.

• 에디터에 초록색으로 줄이 그어진 코드는 고치기 싫으면 무시할 수 있습니다.

• 하지만 빨간색 줄이 그어진 코드는 반드시 고쳐야합니다.

이 시스템에서 스크립트를 실행할 수 없으므로 해결법

VSCode 의 터미널(Terminal)로 Hexo server등을 실행하면
이 시스템에서 스크립트를 실행할 수 없으므로 어쩌구 저쩌구 오류가 나온다.

1. windows PowerShell 프로그램을 관리자 권한으로 실행한다.

2. Set-ExecutionPolicy RemoteSigned 입력후 엔터

3. y 엔터

이제 VS Code로 돌아가 터미널에서 실행해보면 잘 작동한다.

VS Code의 제안 기능? (Ctrl +Space) 단축키가 불편하여 변경했다.

추가로 자동 저장 기능도 설정한다.