위코드 3주차 이제 react를 시작하게 되었다. 사실 아직 JavaScript도 완벽히 까지는 아니여도
80% 정도는 이해 해야하고 넘어가야하는데 아직 50 ~ 60% 밖에 이해를 못한 상태로 넘어가게되었다.
솔직히 JS도 어느정도 수준이 안되서 걱정 되긴하지만 멘토님들이 이게 정상이라는 격려와 하루 공부
일과를 어떻게 짜야하는지 조언을 듣고 멘탈을 부여잡고 더 열심히 하는 수 밖에 없는거 같다 화이팅!
- React란 무엇인가?
1.1 초기 렌더링 - JSX란 또 무엇인가?
- Component와 Props는 또 또 무엇인가?
3.1 컴포넌트의 종류
3.2 props란? - Component와 State는 또 또 또 무엇인가?
- React 컴포넌트의 Lifecycle는 뭘까요?
5.1 라이프사이클 메서드의 이해
5.2 마운트
5.3 업데이트
5.4 언마운트 - 이벤트 핸들링이란?
오늘은 일단 제곧내 처럼 React에 대해 간단히 개념만 알아보자.
1. React란 무엇인가?
리액트는 자바스크립트 라이브러리로 사용자 인터스페이스를 만드는데 사용된다. 그리고 오직 V(view)만
신경 쓰는 라이브러리이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데,
이것을 react에서는 컴포넌트(component)라고 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으면, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. (좀 이해가 어려 울 수 도 있지만 쉽게 풀어 쓰자면 부모 컴퍼넌트가 있고 그 다음 자식 컴포넌트를 나누는 정도로 생각하면 편할듯)
1.1 초기 렌더링
초기 렌더링은 그냥 쉽게 정의하자면, 리액트에서 다루는 render 함수가 존재하는데
이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역활이다.
2. JSX란 또 무엇인가?
진짜 쉽게 말해서 JSX는 자바스크립트의 확장 문법이다. 솔직히 말해서 확장 됐으니 더욱 좋고 편한 기능이
있을테고... 그 외에 다른 장점이라면 더욱 높은 활용도가 있겠다. 예를 드리면 html에서 쓸 수 있던 div나
span 같은 태그도 JSX에서 쓰일 수가 있다. 사스가 킹왕짱 얼굴책 직원들이다 이런걸 만들다니 덕분에
공부 할게 더 늘어났네 오 ^0^ 행복해라. 무튼 확실히 편리한 기능이 마니 생겼는데 이건 담에 차차 알아보자
Example) 왼쪽 JavaScript, 오른쪽 React 머 이런 느낌이랄까?
3. Component와 Props는 또 또 무엇인가?
3.1 컴포넌트의 종류
component 이하 컴포넌트는 앞에 '1. React란 무엇인가?'에 설명되어 쿨하게 패스 하겠다. 난 쿨남이니까 ㅋ
일단 컴포넌트를 선언하는 방법은 두 가지인데 하나는 함수형 컴포넌트이고, 다른 하나는 클래스형 컴포넌트이다. 근데 위코드의 수업은 거의 클래스형 컴포넌트로 이뤄질테니 앞으로 담을 블로그 내용도 클래스형이 담길 예정이다.
그럼 왜 클래스형으로 수업을 하냐? 의문을 가질텐게 간단히 설명하자면 클래스형에 앞으로 배울 기능이 더 많다. 미리 스포하자면 state 기능과 라이프사이클 기능을 사용할 메소드를 정의 할 수가 있다. 그리고 또한 클래스형 컴포넌트는
render 함수가 꼭 있어야하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.
3.2 prop란?
props(as properties) 컴포넌트 속성을 설정할 떄 사용하는 요소이다. props 값은 컴포넌트 불러와 사용하는
부모 컴포넌트라고 생각하면 된다 위에 1.react란 무엇인가?에 끝에 줄에 설명 한거 다시 보기 ㄱㄱ
그 외에도 많은 prop types들이 존재하나 다음에 배우면서 천천히 리뷰 해보도록 하겠다.
4. Component와 State는 또 또 또 무엇인가?
리액트에서 state는 컴포넌트 내부 자체에서 바뀔 수 있는 초짱짱 값이다! props는 컴포넌트가 사용되는 과정에서
부모 컴포넌트가 설정하는 값이므로, 자식 컴포넌트 일 경우 props를 바꾸려면 부모 컴포넌트에서 바꿔줘야한다.
여기서 TMI 하나 클래스형 컴포넌트는 'state'라 칭하고 함수형 컴포넌트는 'usestate'라고 한다.
5. React 컴포넌트의 Lifecycle는 뭘까요?
모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 그렇다면 이 라이프사이클이란 도대체 뭘까?
컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 예를 들자면
1) 리액트로 프로젝트 진행시 가끔 컴포넌트로 첨으로 렌더링 할때
2) 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리할때
3) 불필요한 업데이트를 방지 할때
참고로 이 라이프사이클은 클래스형 컴포넌트에서만 사용이 가능하다.
5.1 라이프사이클 메서드의 이해
간단하게 정리하자면 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메소드
Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.
이러한 메서드들은 우리가 컴포넌트 클래스에 덮어 씌어 선언을 하여 사용할 수가 있는데
이걸 라이프사이클이라 부르며 이것은 큰틀로 총 3가지 카테고리로 나눠진다: 마운트, 업데이트, 그리고 언마운트
(이해를 돕기위한 예시 사진)
마운트, 업데이트, 그리고 언마운트 카테고리도 깊게 심화 가정이 있으니 이건 다음 블로그때 포스팅 하겠다.
