리액트 기초
JSX란
React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다.
JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다.
브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 하는데 이때 이용하는 것이 바로 Babel이다
React에서는 JSX를 이용해 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.
리액트 컴포넌트 리턴값은 하나의 JSX표현식이여야 한다
여기서 표현식이란?
- 자바스크립트 표현식 => 값으로 변환 가능한 코드 덩어리 => 변수에 담길 수 있는 것
- JSX 표현식 => 값으로 변환 가능한 코드 덩어리 => 변수에 담길 수 있는 것
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
<div>
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>React에서 CSS class 속성을 지정하려면
"className"으로 표기해야 한다.
리액트를 이용해 트윗 만들어보기를 진행하면서
오늘은 기초를 배우는 날인만큼 거의 모든게 작성 되어 있었고 나는 약간의 JSX문법을 이용하여 채워 나가기만 하면 과제를 완료할 수 있었다. 과제를 생각보다 이른 시간에 마치고 나는 CSS를 건드리고 오늘 정규 일정을 끝냈다.
나의 첫 스터디
나의 첫 페어님이 스터디를 만든다고 하셔서 참여한다고 했다.
활동은 어제부터 였지만 어제는 간단한 회의만 했다.
스터디에 들어온 이유, 목표 등 많은 이야기를 나눴다.
그리고 오늘 과제에 없었던 컴포넌트별로 js파일을 따로 만들어 나눠주는 작업을 같이 했다. 스터디를 하지 않았다면 혼자 해 볼 생각이 안났을거같다. 하나의 js파일에 몰아 넣는게 맞는 것이라 생각하고 넘어갔을 것이다.
그리고 스터디에 들어오니 정말 대체로 나보다 열심히 하신다.
그래서 동기부여가 더 잘 되는 것 같다. 앞으로 더 열심히 해야겠다.
