리액트..React
리액트는 자바스크립트 라이브러리 → 프레임워크와는 달리 자유롭게 사용가능
리액트는 각 UI를 컴포넌트 단위로 세분화하여 좀 더 효과적이게 UI를 구성할 수 있도록 함
→ 재사용성을 높인다든지.. 컴포넌트를 잘 나누면 유지보수에도 용이
JSX
자바스크립트의 확장 문법
따라서 JSX로 나타난 식들은 모두 기본 자바스크립트로 적을 수 있음
기존의 요소 구조와 기능을 분리해서 작성하던 것을 컴포넌트 단위로 한 번에 작성할 수 있도록 도움
- 그러니까… html에서 버튼을 만들고 js에서 그 버튼에 대한 동작을 제어해주는 형태였는데 (인라인코드X)
- jsx를 사용하면 이를 분리하지않고 버튼 컴포넌트에 하나의 파일로 작성이 가능
html과 js의 통합버전 같은 느낌
변수를 {, } 로 감싼다면 태그와 chlid로 변수 값을 넘겨줄 수도 있음
const CustomButton = (content) => {
return <button>{content}</button>; // jsx
};JSX는 표현식이기 때문에 함수에 파라미터로 넘겨줄 수도 있고 반환할 수도 있으며 변수에 저장할 수도 있다. 정말 멋쟁이네요.
근데 그럼 왜 기본 자바스크립트에선 안 쓰는가?
못 쓰는 것은 아님
추가적인 모듈을 깔고 여러 설정을 거치면 리액트 없이..(그런데 플러그인 이름에 리액트가 들어가는데 이걸 없이라고 말할 수 있나..) 사용할 수도 있다
그런데 꽤나 번거로운 일..
그럼 리액트에서 무조건 써야하나??
사실 이 역시 필수는 아니지만 사용을 추천함
→ 이전에 html+css+js 과제 하면서 느낀 기본 js하기 너무 힘든데?… createElement() 남발 대신
html 작성하던 그 모습대로 구조를 확인할 수 있음
우리가 jsx를 이용하여 코드를 적으면 내부적으로React.createElement()를 호출하여 react element를 생성하게 됨
→ React는 이를 읽어서 DOM을 구성
요소 랜더링 하기
리액트 요소 트리는 가장 상단에 root가 존재
모든 요소는 이 root의 후손으로 포함되어 관리됨
꼭 이름, id가 root일 필요는 없음 의미가 그렇다는 것
CRA로 만들게 되면 root 라고 표시되기 때문에 헷갈리지 말기(나한테 하는 말)
기존의 웹페이지에 리액트를 추가하면 독립된 여러개의 루트노드가 존재할 수 있다고 했다.. → 이 경우 보통 페이지별로 루트노드가 존재하게 되는 것인가?
stackoverflow
지금 화면을 예시로 든다면 왼쪽의 하트와 오른쪽의 목차에만 리액트를 적용하게 되는 것 -> 루트노드 두 개
이런 루트 컴포넌트를 root컴포넌트.render()로 렌더링 할 수 있음
그러면 하위에 포함되어있는 요소들도 모두 같이 렌더링
근데 이런 요소는 변경할 수 없기(immutable) 때문에 만약 값을 바꿔서 새로 그리고 싶다면 새로운 리액트 요소를 만들어서 다시 render()해주어야 함
여러개의 루트노드와는 별개로 한 페이지에서 render() 를 여러번 호출할 수 있으나 React만으로 구성된 서비스는 가장 상단 노드를 한 번만 호출하는 것이 일반적, state를 사용하여 개발자가 따로 지정하지 않고 알아서 업데이트 될 수 있도록 함
이렇게 렌더를 하게 되면 React DOM은 현재 화면에 그려져있는 DOM과 비교하여 변화가 있는 것만 새 것으로 갈아 끼움
→ 값에 변화가 있을 때만 업데이트 하는 것
정리해보면
render를 이용할 때마다 새로운 전체 트리를 그리게 되지만 리액트 dom은 이를 비교해서 바뀐 노드만 교체하게 된다.
컴포넌트
기능이 추가된 사용자 커스텀 DOM tag…?
props와 children 받아 사용자가 구성한 react element를 내놓는 것(함수형 컴포넌트와 클래스형 컴포넌트 존재)
별거 아닌 것 같아보이지만 중요한건 항상 대문자로 시작해야한다는 점! 그렇지 않으면 오류남
- 소문자로 시작하는 경우 일반적인 DOM 태그로 대하기 때문에 존재하지 않는 태그라고 간주
- 일반적인 DOM 태그의 경우
React.createElement를 호출하지 않고 바로 넘겨도 되는데 - 커스텀 컴포넌트의 경우
React.createElement를 거쳐서 넘겨야하기 때문
이런 컴포넌트 역시 DOM 태그와 동일하게 여러번 사용하는 것이 가능
→ 정말 사용자가 직접만든 기능포함 태그
어쨌든, 아예 React 앱으로 처음 시작하든지 기존의 서비스에 React를 적용하든지 컴포넌트를 목적과 기능에 맞게 적절히 추출하는 것이 필요
