🙈 글을 적게 된 이유
자바스크립트때 todo list를 만든 후 모듈화를 시도한 적이 있는데, dependency error때문에 이틀동안 고생했다. 관계도를 잘못 그리는 바람에 모든 곳에서 todos를 참조하는 문제가 발생했고 스코프도 분리되지 않았다. 다시 한 번 MVC 패턴에 의거하여 관계도를 그려 모듈화를 시도했지만, render내부에 todoList라는 돔 API를 참조해 dependency cycle 이슈가 발생했다.
나만의 철학을 담으면서도 스코프와 참조 관계까지 생각하며 모듈화를 하는것이 어려웠다. 처음에는 그냥 세분화만 어떻게 할 지 고민했는데, dependency cycle, let, const 키워드에 대한 문제를 많이 직면하며 좀 더 다각적으로 모듈화를 고민해야한다고 생각 했고, 그래서 이런 모듈화를 해결할 수 있는 리액트를 배우는 것이 상당히 기대됐다. (아직 수업은 3번 밖에 하지 않았지만, 내가 마주했던 문제를 염두해두며 수업에 임할 예정이다)
🙊 그래서 React가 뭔데...
리액트는 사용자 인터페이스를 만들 수 있는 자바스크립트 라이브러리이다. 그래서 자바스크립트를 알아야 React를 좀 더 즐겁게 공부할 수 있다...! (아는 만큼 보이니까)
React는 선언형, 컴포넌트 기반이라는 특징이 있다. 선언형 프로그래밍이란 'what'에 초점을 둔 것을 의미한다. 즉, 명령형 프로그래밍처럼 하나하나 세세하게 알려주며 '여기서는 이렇게하고 저기서는 저렇게 해'가 아닌 '나는 이걸 할거야'라고 알려주는 것을 말한다. 다시 말하면 '무엇을 수행하는지'에 관심이 있는 것이다.
컴포넌트 기반이란 React 공식 홈페이지에 가보면 '스스로 상태를 관리하는 캡슐화된 컴포넌트'라고 적혀있다. 아까 말한 모듈화처럼 재사용이 가능한 작은 기능적 단위를 뜻한다. 이 컴포넌트를 조합해 하나의 특정한 기능을 만들 수 있어 React에서는 이 컴포넌트를 합성하여 사용한다. 단, 모든 리액트 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작해야 한다.
🙉 React.createElement, JSX
👉React.createElement
React.createElement는 주어지는 인자에 따라 새로운 React Element를 생성한다. 이 createElement에는 타입, props, children 정보가 들어가야한다. 그럼 이 type, props, children은 무엇일까?
React.createElement({
type : 'body',
props: {
className: 'sectionRoot',
children: [
{type: 'h1', props: {children: 'heading'} },
{type: 'p', props: {className: 'description'} },
]
},
})위의 코드가 바로 createElement로 새로운 엘리먼트를 생성한 것이다. type인자로는 html tag, react component type, react fragment type이 올 수 있다. props에는 class나 자식 요소 정보가 들어가게 된다. 보다싶이 너무 복잡하고 적기 귀찮다 더 편리하게 리액트 요소를 만들 수 없을까에서 나온 것이 JSX이다. JSX를 필수로 사용해야하는 것은 아니지만 사용하면 훨씬 편리해지기때문에 대부분 JSX를 사용한다.
👉JSX (JavaScript XML)
JSX는 자바스크립트를 확장한 문법으로, createElement처럼 리액트 요소를 생성한다. JSX는 카멜 케이스 프로퍼티 명명 규칙을 사용한다는 특징이 있다.
class Hello extends React.Componenet{
return (
<button type={type} aria-label={label}>
<svg width={30} height = {30} viewBox ="0 0 30 30" fill=none"></svg>
</button>
);
}
위의 코드가 바로 JSX인데 훨씬 가독성도 좋지 않은가?
JSX를 사용하면 createElement를 사용할 때 보다 훨씬 적은 코드 작성만으로 리액트 엘리먼트를 만들 수 있으며 XSS(cross-site-scripting) 공격을 방지한다는 특징이 있다. 이는 모든 값을 렌더링하기 전에 이스케이프(특정 문자를 html로 변환하는 행위)를 하기 때문에 명시적으로 작성하지 않은 것은 렌더링하지 않기 때문에 보안을 유지할 수 있다. 하지만, 바벨을 통해 JSX를 createElement로 컴파일 해야 한다.
결론
이렇게 리액트 라이브러리는 중복을 제거할 수 있다는 장점이 있다. 가령, html은 똑같은 코드라도 사용하는 위치가 다르면 복사, 붙여넣기를 해야한다. 하지만 리액트에서는 모듈화가 되어 있기 때문에 가져다 쓰기만 하면 된다. 정말 리액트를 배우다보니 정말 신기하고 일의 효율성을 극대화시켜준다는 생각이 들었다. 그리고 리액트 동작방식이 정말 신기해 다음번 포스팅에서는 diffing 알고리즘에 대해 한번 이야기 해보고자 한다.
