한동안 이것 저것 하면서 정보처리기사 준비하느라 글을 못 올렸어요ㅠㅠ
이번주부터 다시 틈틈히 올려보도록 하겠습니다!!
학습 내용은 인프런 강의와 온라인에 올라와있는 기초 문제를 토대로 하였습니다.
React 소개
1. React란?
-> 사용자 인터페이스를 만들기 위한 JavaScript의 라이브러리 (프레임원크가 아니다)
* 프레임워크 : 개발을 위한 기본 틀, 뼈대
* 라이브러리 : 개발에 필요한 도구 또는 그 집합
=> 비슷하지만 라이브러리가 좀 더 큰 범위
장점 : 1) 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 용이함
2) SPA
3) 현업에서도 많이 사용되고 있음
특히, 기존 웹 서비스는 모든 페이지에 대한 네트워크 요청으로 코드가 늘어나는데 반복적으로 다운되는 리소스가 많아지는데 이런 전통적인 웹 서비스의 문제점을 해결하고자 SPA(Single Page Application) 방식 등장
* 대표적인 SPA방식 : React, Vue, Angular 등
2. React의 특징
1) 컴포넌트 기반 설계 : 스스로 상태를 관리하는 캡슐화된 코드 조각
- 의미단위로 컴포넌트 구성
- 재사용성과 유지보수성 증가
- 부모, 자식 관계를 가짐
2) Vitual Dom (가상돔) : 실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용됨
- DOM을 직접 변경하면서 생기는 비효율을 해
3) CSR(Client Side Rendering) : JS를 통해 서버가 아닌 클라이언트 브라우저에서 랜더링한다는 의미
JSX
1. JSX란?
JSX = HTML + JavaScript
-> Java Script를 확장한 문법으로 JavaScript XML이라는 의미
= 모양은 HTML에 가깝지만 JSX임 React는 이 JSX를 이용하여 화면을 그림 (컴포넌트)
특징
1) JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다름
- class -> className
- for -> htmlFor
- onclick -> onClick ... 등
2) 태그를 명시적으로 닫아줘야 함
3) 하나의 태그로 감싸져 있어야 함
실습 문제
실습1. React의 기본 사용법 익히기
화면에 글을 띄워보자
결과 화면
** App.js **
만든 컴포넌트들을 여기에서 불러와서 배치하는 곳
(HTML로 치면 <body> 태그를 생각하면 쉬움)
브라우저로 랜더링 됨
** React는 컴포넌트도 태그처럼 쓰기 때문에 닫는 태그가 필요없는 경우에는 /를 붙여서 짧게 쓴다.
< Hello /> 의 /는 Hello에 자식 요소가 없어서 /를 붙여서 닫는다.
< Hello /> <Hello> </Hello> 둘 다 똑같이 작동
실습2. 버튼 클릭 시 숫자 증가시키기
결과 화면
** useState란?
React에서 기본적으로 제공하는 상태관리
- React 안에 내장된 Count 라이브러리처럼 변하는 데이터를 저장하고, 그 값이 바뀌면 UI를 자동으로 다시 랜더링해주는 역할
🎶특징
| 항목 | 설명 |
| 소속 | React 내장 함수 |
| 형태 | const [값, 값을 바꾸는 함수]= useState(초기값); |
| 목적 | 컴포넌트 내부에서 바뀌는 값을 기억하고 화면에 반영 |
| 장점 | 상태가 바뀔 때 자도으로 컴포넌트가 다시 랜더링됨 |
| 비교 | 일반 JS 변수는 화면에 반영되지 않지만, useState는 자동 반영됨 |
+ Hello.js랑 Counter.js를 한 화면에서 보고 싶다면?
결과 화면
실습3. 간단한 "Todo List" 만들기
결과 화면
** 코드 분석 **
1) 할 일 목록을 컴포넌트 안에서 기억할 수 있도록 useState 함수 불러오기
2) 상태 변수 선언
문법 : const [값, 값을 바꾸는 함수]= useState(초기값);
- input : 사용자가 입력하는 텍스트 상태 (초기값: 빈 문자열)
- todos : 할 일 목록 배열 (초기값: 빈 배열)
- setInupt, setTodos : 값을 바꾸는 함수들
3) 할 일 추가 함수
- input.trim() === ' ': 입력값이 공백이면 추가 안 함
* "===" -> 값과 타입이 모두 같은지 확인하는 연산자로 React에서 대부분 '==='를 씀
- [...todos, input] : 기존 배열을 복사하고 새 할 일 추가
* "..." -> 스프레드 연산자
🔥 React는 원본을 직접 수정하지 않고, 복사본을 만들어서 갱신하는 방식(불변성)을 지키기 위함
예 ) const todos = ['밥먹기'];
const input = '공부하기';
const newTodos = [...todos, input];
// 결과: ['밥먹기', '공부하기']
- setInupt(' '): 입력창 초기화
4) 입력창
- value={input} : 입력창에 보여지는 값은 상태값(input)을 따라감
* value -> 입력창의 현재 값 (상태와 연결)
이 input 태그의 값은 input 상태 값과 연결되어 있다는 뜻
즉, 상태 값이 바뀌면 입력창에도 반영되고, 반대로 입력창이 바뀌면 상태도 바뀜
- onChange={...} : 입력이 바뀌면 setInput()을 통해 상태 업데이트
* onChange{...} -> 입력 내용이 바뀔 때마다 실행되는 함수
(e) => setInput(e.target.value)
- e: 이벤트 객체 (event)
- e.target.value: 사용자가 입력한 실제 값
- setInput(...): 그 값을 input 상태로 저장
결과적으로, 입력창에 글자를 쓰면 input 상태가 실시간으로 바뀜
5) 할 일 목록 랜더링
- todos 배열을 map()으로 돌려서 <li>로 하나씩 출력
* map()이란?
- 배열을 반복하면서, 각 요소를 새로운 형식으로 바꿔주는 함수
즉, 배열을 반복하면서 JSX 요소로 바꾸기
- key={idx}는 React가 요소를 효율적으로 다루기 위해 필요함
*key란?
- React가 항목을 고유하게 구분할 수 있게 해주는 값
오늘은 React의 기본적인 개념과 간단한 실습을 통해 사용법을 알아봤습니다~~