React

프론트엔드/React

1. JSX 문법

첫 리액트 포스팅은 !! React에서 사용하는 문법 JSX에 대해 쓰려고 한다. 바로 본론으로~ ⭐️ JSX가 뭘까?? JSX(Javascript XML)는 Javascript에 XML을 추가한 확장문법. JSX는 리액트로 프로젝트 개발할 때 사용되므로 공식적인 Javascript 문법은 아님. 브라우저는 Javascript형태의 코드를 읽기 때문에, 브라우저에서 실행하기 전에 바벨을 사용하여 JS 형태의 코드로 변환. JSX는 하나의 파일에 JS와 HTML 동시 작성. 위의 이유 때문에 가독성이 높고 작성이 쉬움. 🖋️ 그럼 JSX를 어떻게쓰는거야?? (문법) JSX는 기본 규칙이 존재한다. 어떤게 있는지 살펴보자! 1. 구성요소에서 여러 요소를 반환하려면 단일 상위 태그로 요소를 래핑해야함. 쉽게 ..

코테/koans, 코플릿, sprint

5. React Twittler Intro 풀이

오늘은 리액트를 시작하는 날이였다 하지만 첫날부터 이런 고비가...?? 이거 jsx 뭐야..?? 왜이래? 내가했던 HTML, JS 어디감...?? 여튼 이번 과제는 이름, 사진, 내용 등등이 들어있는 데이터 더미가 주어지고 이 데이터 더미에서 내용을 뽑아와서 구현해보는 과제를 풀었다. 처음에 딱 app.js 보자마자 든생각은 이걸 뭐 어쩌라고??? 어떡하라고 하지만 마음을 다잡고 다시 이해해보니 오?? 이렇게하는건가? 하나씩 맞춰가다보니 생각보다 간단했다. 완성된 브라우저는 다음과 같이 된다. 1. import로 모듈 불러오기 먼저 import 를 통해 export로 내보낸 모듈을 가져온다. 2. Sidebar 컴포넌트 구성 Sidebar 컴포넌트는 위의 브라우저 사진에서 왼쪽 빨간색 사이드바의 컴포넌트..

plla2
'React' 태그의 글 목록