오늘 목표했던 것 🗒
트위틀러 React로 구현 ✓
JSX 문법이 등장하게 된 이유
JSX가 없던 시절에는 위의 코드처럼 작성했다고 한다.
HTML 코드들은 디자이너 분들도 협업하는 과정에서 보게 되는데,
위같이 HTML을 자바스크립트로 표현된 코드들을 해석하는데에서 어려움이 있었다고 한다. 게다가 개발자 입장에서도 모든 HTML 코드를 저런 식으로 작성하는 것도 복잡하고 귀찮았다고 한다.
그래서 나오게 된게 HTML 코드를 작성할 수 있는 JSX 문법이다.
JSX는 자바스크립트로 인식이 되기 때문에 비즈니스 로직 작성이 가능. (조건문)
컴포넌트 단위로 개발할 때의 장점
DOM을 이용하여 페이지 단위로 개발을 하게 되면, 전체 페이지를 새로고침하여 업데이트를 해야 한다. 하지만, 컴포넌트 단위로 개발을 하게 된다면, 해당하는 UI(컴포넌트)만 업데이트 하면 된다.
React 엘리먼트에 접근하는 방법
원래 DOM에서 작업을 할 때는 아래와 같은 코드로 엘리먼트에 접근이 가능했다.
<div class="title">무야호!</div>
document.querySeletor('.title').value // '무야호!'React에서는 Ref를 사용해야 접근할 수 있다고 한다.
this.usernameRef = React.createRef()
this.textRef = React.createRef()
<input ref={this.usernameRef} className="username".../>
<input ref={this.textRef} className="text".../>브라우저에서 정보들을 작성한 뒤 submit을 할 경우, this.usernameRef로 엘리먼트 정보들이 들어오게 된다.
console.log로 usernameRef 결과 아래와 같은 current 객체가 들어온 것을 확인할 수 있다.
current 객체 안에서 value 값을 얻어 브라우저에 원하는 정보들을 표현할 수 있었다.
참고 강의 드림코딩
오늘 배운 것
‣ React로 트위틀러 구현
‣ React UI 라이브러리 사용
내일 할 것
‣ 토이 문제 풀기
‣ 리액트 공부
