18일차

2021. 08 .11 수요일

1. Today's Key points!

• JSX
• React
• React Twittler
• 알고리즘. convertListToObject

2. 정리해보자!

• JSX란? JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 하지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그래서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이것을 'Babel' 이라고 하는데, JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다. 컴파일 후 JavaScript를 브라우저가 읽고 화면에 렌더링 할 수 있다. JSX를 이용하면 DOM코드보다 명시적으로 코드를 작성할 수 있다. 그래서 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
• React로 웹앱을 만들게되면 새로고침 없이도 페이지 이동이나 작동을 할 수 있다. 매우 스무스하게 동작한다. 앱으로 발행하기도 쉽다. 앱처럼 뛰어난 UX를 자랑하기 때문에 비지니스적인 강점도 있다.

3. 복기!

React Twittler

리액트를 오늘 처음 배우고 과제를 했다. 사이드 바 컴포넌트 넣기, 이미지 삽입하기, 조건부 렌더링으로 특정 이름에 background color 부여하기를 해보았다. 

왼쪽에 보이는 것 처럼 리스트 안에 프로필 사진, 유저이름, 내용 등등을 하드코딩으로 구현한 것이 아니고 map을 활용해서 넣어주었다. 그리고 parkhacker 이름에만 background 효과를 주는 것. 이러한 것들은 어렵지 않게 구현할 수 있었다. 근데 오늘 머리를 아프게했던 것은 사이드바에 종모양을 누르면 notice정보가 나오도록 구현하는 것이었다. 그것을 구현하기 위해서는 state, useState, props 개념이 필요하다.