리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보자. 보통 사이트는 html, css, js로 만들어져 있는데, 리액트는 이것들을 컴포넌트 단위로 묶어서 UI를 만든다. 예를들어서 버튼 하나도 컴포넌트라고 할 수 있다. 컴포넌트는 독립적이고, 고립되어 있으며 재사용이 가능하다. 컴포넌트를 만드는 방법은 아래와 같다. 다음은 Hello라는 컴포넌트를 만드는 코드이다. import React from 'react'; function Hello(){ return Hello; } export default Hello; 위 코드에서 눈에 띄는 것은 html과 비슷해보이는 코..
리액트는 UI를 만드는 자바스크립트 라이브러리이다. CSR을 하기 때문에 앱과 같은 사용성을 제공할 수 있다. 리액트를 왜 사용하는가 JavaScript만 사용할 때 힘든 지점 기존 자바스크립트에서는 DOM을 업데이트하기 위해서는 명령형 접근을 해야 했다. 즉, 모든 세부 단계의 코드를 작성해야했다는 말이다. 예를 들어서, 위 이미지처럼 생긴 할 일 관리 어플리케이션을 만든다고 생각하고, 수도코드를 작성해보자. /* 할 일 입력받기 */ // 1. 할 일을 입력받는 form을 html로 코딩한다. // 2. 할 일을 입력받는 form 노드를 찾아둔다. // 3. form노드가 submit될 때, input에 입력한 값을 저장해둔다. // 4. 새로운 element를 생성하고, 그 안에 2번에 저장한 값을..
- Total
- Today
- Yesterday
- 팁
- 토이프로젝트
- 취미
- 삽질방시
- autoplay
- 리덕스
- 네트워크
- DevOps
- 웹퍼블리셔
- 하우징 도색
- 타입스크립트
- TIL
- 정규표현식
- 회고록
- 보안
- 프로젝트
- 키보드
- 개발일지
- 마크다운
- 강의후기
- 삽질방지
- 키크론 v10
- 리액트
- 앨리스배열
- storybook
- AWS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |