리액트 기본 정의

• 웹개발을 보다 효과적으로 작업할 수 있도록 만든 JS기반 라이브러리
• 선언적: 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다.
• 컴포넌트 기반: 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다.
• 한 번 배워서 어디에서나 사용할 수 있다.

JSX

• JSX는 자바스크립트 문법의 확장판, 리액트에서 요소를 제공한다. 기존의 HTML 문서를 리액트로 그려주는데, HTML태그를 JS위에서 사용이 가능하게 해준다.
• HTML태그를 변수에 선언할 수 있다.

const element = (
  <h3 class={student.color}>
    {formatInfo(student)}
    </h3>
)

ReactDOM.render(element,
document.getElementById('root'));

• ReactDOM은 화면에 JSX코드들을 그려주는 역할을 한다.
• 위의 코드들을 보면 HTML코드 안에 '{}'로 감싸져있는 코드들이 있는데 이게 바로 JSX이다. 중괄호 안에는 JS코드가 들어간다는 뜻이며 이로 인해 HTML,JS코드들을 같이 사용할 수 있다.
• JSX는 속성, 내용 모두 들어갈 수 있다.
• 위의 {formatInfo(student)}는 HTML코드 안에 들어가있는 자바스크립트 함수이다.
• 다시 말해 JSX는 Javascript언어와 HTML언어를 동시에 사용하는 걸 가능하게 해주는 언어이다.
• 기본적으로 CamelCase를 사용한다.

Component

• Component는 항상 렌더링을 수행한다는 특징이 있다.
• render라는 함수를 이용해서 화면에 그려준다.
• Component는 Props를 입력으로 받아서 리액트 요소를 반환하는 형태로 동작한다.

Component와 Props

가장 이해하기 어려웠던 부분이라 꼭 집고 넘어가야했다!!

일단 component는 말 그대로 구성 요소이다. 부품처럼 내가 원하는 위치에 용도에 맞게 끼워맞춰주면 된다. 문제는 Component와 props의 경계선이다. 내가 이해하기 쉽게 정리하자면 props는 Component의 속성이자 객체이다. 여기서 중요하다. props는 Component가 생성되는 순간 props라는 객체가 생겨난다. 그래서 <Component 속성="value" />보기와 같이 속성에 key와 value를 넣어주는 순간 props라는 객체에 담긴다. 앞의 코드를 props관점에서 해석하자면 props라는 객체에 '속성':'value'라는 프로퍼티를 담아줘~! 라고 해석한다. 여기서 키포인트는 props는 propertys의 약자라는 것이다. 그렇다 props는 객체 안에 들어있는 프로퍼티들이라는 이름을 가진 객체라는 뜻이다. 그래서 우리가 Component의 속성값으로 주어진 것들이 props라는 객체에 담기고 그 객체에 담겨있는 value에 접근해서 컴포넌트 안의 코드들을 조정할 수 있는 것이다.

마무리

이 부분이 이해되지 않아 진도를 나가도 마음에 걸렸다. 내가 이해하지 못한 키 포인트는 JSX가 사용될때 {}가 들어가야할 때였고, 언제 {}를 써줘야하고 어떤 기준으로 사용하는지 햇갈렸다.
Props는 여전히 완벽히 이해했다고 볼 순 없지만 속성으로 사용되는데 왜 객체인건지 이해가되지 않았다. 그래서 하나씩 코드를 찍을 때마다 연습장에 Component안에 적어준 속성과 값이 어디로 이동하는지 그려보았다. 중요한 부분은 어디로 이동하는지 그려보는 것이였다.