지금 발견한 사실. 리액트 공식문서가 2023 버전으로 새로 만들어지는 중이었다... ㅋㅋㅋ
beta.reactjs.org <- 아직 베타인듯 함
앞으로는 기존 공식문서 (v18.2.0) 랑 잘 섞어가면서 쓰도록 하겠다. 베이스는 기존 공식문서로 하겠음.
Component ?
새로운 리액트 문서는 컴포넌트를 "UI building blocks"라고 부른다.
element가 리액트 앱의 최소 단위라면,
Component는 UI 단에서 볼 수 있는 블록 정도라고 할까나?
함수 컴포넌트, 클래스 컴포넌트
리액트 18 기준, 함수형이 더 권장된다.
일단 보기 편하고, 기존에 OOP 개념으로만 작동되던 메서드들이 Hooks의 등장으로 대체되었기 때문.
유사한 기능을 가진 함수형 컴포넌트들을 만들 때마다 OOP로 extend 하고 싶은 마음이 들긴 하지만, 200본 이상 넘어가는 큰 단위의 프로젝트가 아니라면 함수형 복붙해서 쓰는것도 크게 불편하지는 않은 듯 하다. custom hooks를 만들어서 import 해 쓰는 방법도 있으니까!
컴포넌트 만들기
리액트 이전 웹 페이지들은 HTML로 마크업을 만들어 놓고 약간의 JS를 추가했었다.
하지만 이 방식은 웹에서 상호작용 (interaction)이 플러스 알파였을 때에만 좋은 방식이었다.
리액트는 컴포넌트를 JS 함수 기반으로 만들어 두고, 약간의 마크업(유사 HTML 이라고 할까나)를 추가해서 상호작용성을 최우선에 놓는다는 정신!
각설. 함수형 컴포넌트를 만들어보자.
! 함수 이름은 PascalCase. 첫 글자를 대문자로 하지 않으면 작동하지 않음.
camelCase로 사용하면 DOM 요소로 인식함.
Profile 이라는 컴포넌트를 아래와 같이 정의할 수 있다. (ES6 화살표함수를 쓰겠음. 그냥 function 으로 정의해도 좋음)
const Profile = (props) => {
return (
<img
src="https://i.imgur.com/{props.name}"
/>
);
}
컴포넌트는 props를 인자로 받고 어떤 마크업을 리턴하는 녀석인 것이다.
이 컴포넌트는 아래와 같이 렌더링 할 수 있다.
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Profile name="Sara" />;
root.render(element);브라우저의 동작 순서 :
1. root.render() 실행 -> element를 렌더링 해줘야지
2. <Profile name="Sara" /> 발견 -> PascalCase이니까 얘는 React Component 구나!
3. Profle 이라는 함수 참조. props라는 인자값 보고 name 값 받아서 return 값 렌더링.
컴포넌트 합성
내가 생각하는 리액트의 가장 큰 장점 중 하나다.
UI와 로직을 잘 버무려놓은 덩어리 (컴포넌트)를 다른 컴포넌트에 다시 집어넣을 수 있다.
재사용이 쉬워지고, 가독성도 좋아진다.
앞서 정의한 Profile 컴포넌트를 이렇게 사용할 수 있는 것.
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}Gallery 안에 Profile이 여러번 렌더링되는데, 이렇게 합성된 경우 Gallery는 부모 컴포넌트, Profile은 자식 컴포넌트가 된다.
! 주의 : 컴포넌트 정의할 떄 Nest 하면 안됨!!
컴포넌트 정의할 때는 (합성될 때라도) 최상단에서 정의해야 함. 안그러면 느려지거나 버그가 생길 수 있다.리액트의 문제가 아니라 JS 문제. Scope Chain을 잘 생각해보자.
Props는 읽기 전용
Props는 함수형 컴포넌트가 받는 인자. 보통 렌더링 할 때마다 변해야 하는 변수를 넣어준다.
! 함수형 컴포넌트는 인자로 props 객체 하나만 받는다 !
리액트 컴포넌트의 props는 HTML의 attribute에 해당하는 자리 (attr = prop 이라는 말이 아님!)에서 읽는다.
리액트에서 가장 중요한 개념 중 하나. Props는 부모에서 자식으로 내려주기(passing props)만 가능하다. 함수형 컴포넌트를 순수 함수로 사용해야 한다고 함.
순수 함수 Pure function ?
- 동일한 인자가 들어가면 항상 동일값 return
- 부수 효과 (side effect) 없음 :
함수에서 외부의 변수의 값을 변경하거나 들어온 인자의 값을 변화시키는 경우.
ex. 함수 밖의 let 값을 함수가 참조해서 리턴값을 낸다고 하자.
함수 밖 let 값이 바뀌면 동일한 인자가 들어와도 다른 값을 리턴하게 될 것임.
그렇다면 왜 이렇게 만들어놨을까?
지금부터는 공식문서에 없는 뇌피셜이다.
xss를 막기 위해 escape를 default로 처리해주는 것과 비슷한 이유이지 않을까 싶다.
순수함수가 가지는 이점이 있기 때문! 단위가 큰 리액트 프로젝트를 하다 보면 부모 - 자식 컴포넌트가 6,7단계씩 들어가는 경우가 흔한데, 3단계에서 갑자기 부모가 내려준 prop을 바꾸면 개발자가 정신을 못차릴 듯?
