리액트 스타트

리액트는 웹 서비스의 UI를 담당하는 자바스크립트 라이브러리이다. 프레임워크가 아닌 라이브러리이므로 UI 이외에 페이지 전환과 같은 기능은 제공하지 않는다. 이런 UI 이외의 기능들을 구현하기 위해서는 외부 라이브러리를 함께 사용해야 한다.
예) 페이지 전환하려면? react-router 외부 라이브러리 사용

• 라이브러리(리액트 - 자바스크립트 기반)
  전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공한다.
  개발자는 필요한 도구(라이브러리)를 가져와서 사용한다.
• 프레임워크(앵귤러,뷰 - 자신만의 문법을 가지고 있음)
  개발자가 작업을 하기 위한 전체적인 tool 을 제공한다.
  개발자는 틀 안에서 그 방식에 맞춰서 작업을 한다.

프레임워크는 외부 라이브러리를 사용하지 않고도 기능이 포함되어 있어서 그냥 사용할 수 있다. (next.js는 리액트 프레임워크)

• 컴포넌트
  
  함수형 컴포넌트가 훨씬 간단하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없다. 그래서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용할 수 있도록 도구를 만들어주었다. 이 도구를 Hooks(훅)이라고 부른다. 대표적인 훅에는 useState와 useEffect가 있다.

• state
  state란 리액트 컴포넌트에서 데이터를 담기 위한 상자이다. 자바스크립트에서는 데이터를 변수에 담았다. 즉, state는 컴포넌트에서 사용하는 변수이다.
  -state: 컴포넌트에서 사용하는 변수(state)
  -setState: 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
  -useState: 컴포넌트에서 사용하는 변수(state)를 만들어주는 기능
  (js 예시) let classmate = "철수"
  (react 예시) const [classmate] = useState("철수")

// 자바스크립트에서 변수 바꾸기
let classmate = "철수"
classmate = "영희"       // classmate 가 영희로 바뀝니다.


// 리액트 컴포넌트에서 변수 바꾸기
const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용) 
const [classmate, setClassmate] = useState("철수")
setClassmate("영희")     // classmate 가 영희로 바뀝니다.

• public 파일
  public 디렉토리는 기본적으로 정적파일을 담고 있는데, 사용자에게 직접 웹브라우저상에 보이는 html 파일들이나 image 등이 이 디렉토리에 담긴다.
  -process.env.PUBLIC_URL 사용 -> 정적파일의 기본 경로를 설정

<img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />