[TIL] 23.04.14.

오늘의 학습 내용

• 리액트 입문 강의 수강
• 리액트 관련 개념 공부

새로운 배움

• 리액트 기초 개념 (CRA, JSX, 컴포넌트)
• JSX 문법

문제 상황과 시도, 해결

리액트 입문 강의에서 간단한 실습을 하는데 리액트를 하나도 몰라서 조금 해맸다. 입문 강의에서는 리액트에 대한 개념도 다루지만 실습을 하고 난 다음에 다루기 때문에 실습 과정에서 우여곡절을 겪었다. 기초적인 부분들이라 다루는 강의도 없어서 리액트 책을 정독하면서 찾았다.

• 멀티라인 return
  리턴을 할때 어떤 예제 케이스는 소괄호가 없고 어떤 경우는 소괄호 안에서 리턴을 하고 있었다. 알고보니 멀티라인의 경우 소괄호가 필수였다.
• JSX 문서 부모태그 필수
  간단한 실습과제를 혼자 하면서 처음으로 JSX문서를 다루었다. 일단 HTML이랑 비슷해서 만만해 보였는데 디테일한 문법 차이가 있었다. 특히 return을 할 때 반드시 내부 요소들은 부모 태그로 감싸져 있어야 했다.
  그리고 요소로 감싸는 태그는 비어있는 태그를 사용해도 된다. 이때 비어있는 태그가 넘어오면 브라우저는 해당 태그를 랜더링 하지 않고 그 안의 요소들만 랜더링 한다!!
• JSX 인라인 스타일 태그
  간단한 이벤트를 걸어주는 과정실습 중이었다. 버튼을 생성하고 스타일을 적용하는데 아무생각없이 HTML과 같게 사용했더니 냅다 에러가 났다. JSX인라인 스타일을 검색해서 방법을 찾아서 적용하니 잘 되었다.
• <button style={{ margin: 'auto' }} onClick={clickEventHandle}>클릭</button>

관련 작성글

[리액트] React란
[리액트] CRA란? 리액트 프로젝트 생성하기
[리액트] 컴포넌트란? 리액트 컴포넌트 간단 예제
맥북 M2, yarn 설치하기🔧 (🖥️terminal, 🍺Homebrew, npm)
npm vs yarn

느낀점

리액트를 처음 접하는 거라서 조금 느리지만 느린만큼 처음 개념을 잘 잡고 가야겠다고 생각했다.
또 버츄얼돔과 같은 리액트의 특징들을 살펴볼수 있어서 너무 즐거운 시간이었다.