프론트엔드 라이브러리(React,angular,vue )
동적인 웹 페이지가 늘어나고 웹의 크기가 커지자
이를 효율적으로 관리하기위해 많은 라이브러리들이 등장했지만
UI 를 동적으로 나타내기 위해 복잡한 상태를 유지해야했다.
시간이 지날수록 모든 페이지 별로 HTML,CSS,JS 파일을 가지고 있어야 했고
페이지간 이동할 때마다 파일을 서버와 주고 받아야 했기 떄문에 속도,효율성 면에서 떨어졌다.
※정확하게는 시간이 지날수록 보단 사용자의 요구사항이 복잡하고 많아져서 라고 보면된다.
그래서 3세대 기술 Vue / Angular / React 가 나오게 되었고
그중 React를 알아보도록 하겠다.
React
- 2013년 페이스북에서 개발한 라이브러리
- '지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는' 목표로 개발
- Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오직 View만 담당하는 라이브러리
- 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-Router, Redux)를 함께 사용한다
특징
기존 DOM들은 페이지가 변할 때마다 새로운 HTML을 로드하면서 DOM을 변경하게 되는데
Virtual DOM 은 사용자의 요청에 따라 기존 DOM에서 React 컴포넌트가 리턴하는 값에 의해
필요한 부분만 변경해서 렌더링 된다(연산의 양을 줄일 수 있음)
리액트가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 구조이다.
리액트의 데이터 흐름은 단방향이다
부모에서 자식 한 방향으로만 흐르며 부모의 데이털르 바꿔주기 위해서는 state를 이용해야 한다.
props/state
props
부모 컴포넌트에서 자식 컴포넌트로 전달 해 주는 데이터를 props라고한다.
읽기전용이며 자식 컴포넌트에서 전달받은 props를 변경할 수 없다.
state
컴포넌트의 상태를 나타내며 props와 반대로 변할 수 있다.
각각의 state는 독립적이며 다른 컴포넌트의 직접적인 접근이 불가능하지만
props를 부모 컴포넌트의 state로 받은 경우 자식 컴포넌트에서 변경이 가능하다.
이외 설명
JSX 문법 특징
1. class 속성부여할 땐 className으로 부여할 것
2. 변수 넣을 땐 {중괄호}
3. style 속성 부여할 땐 style={{스타일명:'값'}}로 표현할 것
4. 이벤트 핸들러 달 때는 안에 함수이름을 넣어야한다.
* state 만드는 법
1. import { useState }
2. userState(보관할 자료)
3. let [첫번째작명, 두번째작명]
> 첫번째작명 : state에 보관했던 자료 나옴
> 두번째작명 : state 변경 함수
* state 사용 이유
> 일반병수 : 변경되면 html 자동랜더링 안됨 즉, 로고같은 자주 변경되지 않을 것만
> state : 변경되면 html 자동랜더링 됨 즉, 자주 변경될 것만
* state는 언제 쓰나요 ?
> 변동시 자동으로 html에 반영되게 만들고 싶다면
state 사용할 것
* state 변경하는 법 onClick 은 C대문자로 써야함 낙타표기법
> state변경함수(새로운 state의 값)
* state변경함수 특징
> 기존 state == 신규 state의 경우 변경 안해줌
* array / object 특징
> array / object 담은 변수에는 주소값만 저장됨
* 컴포넌트 만드는 방법
1. function 만들기
2. return () 안에 html 담기
3. <함수명></함수명> 쓰기
* 컴포넌트로 만들면 좋은 것
1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들
* 컴포넌트의 단점
1. state 가져다 쓸 때 문제가 생김
* 동적인 UI 만드는 방법
1. HTML, CSS로 미리 디자인 완성
2. UI의 현재상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성
* map 함수 특징
1. array 자료 갯수만큼 함수안의 코드 실행해준다.
2. 함수의 파라미터는 array안에 있던 자료임
3. return문에 값을 적으면 array안에 담아줌
* map함수 특징 2 (state와 함께 썻을 때)
1. 왼쪽 array 자료만큼 내부코드 실행해줌
2. return (html코드) => html코드를 array로 담아줌
3. 유용한 파라미터 2개 사용가능
부모 -> 자식 state 전송하는법
1. <자식컴포넌트 작명={state이름}>
2. props 파라미터 등록
3. props.작명 사용
