안녕하세요 ! 💡 오늘을 기점으로 저는 매일
리액트를 포스팅 할 예정입니다!
시작에 앞서 잠시
🌟리액트를 소개하는 시간🌟
을 갖겠습니다 ! 🙃
웹 페이지는 크게 데이터, 그리고 UI(사용자 인터페이스)로 구성된다고 볼 수 있습니다. 리액트는 데이터 변경에 따라 UI를 효율적으로 렌더링하고 업데이트 해 주는 라이브러리입니다. 간단히 말하면 개발자는 컴포넌트 코드를 작성하고, 리액트가 이를 통해 DOM을 업데이트 하는 방식으로 이루어집니다. 🫂
리액트에서는 주로 JSX 문법을 사용합니다.
* 컴포넌트 : 리액트의 기본 구성 요소. 데이터와 UI를 하나로 묶은 덩어리의 개념
* JSX : javascript 확장 문법. HTML/XML과 유사한 구문 사용
* DOM : 웹 브라우저가 웹 페이지를 렌더링하기 위해 구조화된 객체 모델
* 렌더링 : 코드를 해석하여 시각적인 요소로 변환하고 이를 화면에 출력하는 과정
리액트의 궁극적인 목적은 바로 "데이터와 화면의 일치"라 할 수 있겠습니다. 따라서 우리는 component를 통해 데이터가 바뀌면 화면도 바뀌도록 코드를 짜야 합니다.
클래스 리액트 컴포넌트의 전체 코드를 보며
이야기 해 봅시다.
위에서부터 코드를 한 줄씩 살펴봅시다. 아이디가 root인 div 밑에 보이는 코드 두 줄은 각각 React 라이브러리와 ReactDOM 라이브러리를 불러오는 코드입니다.
(위 사진에는 없는)바로 아래의 코드는 바로 바벨(babel) 라이브러리를 넣어주는 코드입니다. 각각의 라이브러리들이 정확히 어떤 동작을 돕는지는 코드를 계속 더 살펴보며 이야기 해 나가겠습니다.
"text/babel" type의 스크립트 태그 내부를 살펴봅시다.
스크립트 태그 내부에는 javascript에서 자주 봤던 class가 보입니다. LikeButton이라는 클래스가 React.Component로부터 상속을 받고 있네요. 아직 우리는 리액트를 잘 모르지만 LikeButton 클래스가 이 코드에서의 컴포넌트 덩어리가 아닐까 생각이 듭니다. 앞서 React 라이브러리는 컴포넌트를 만들고 관리하는 데 사용된다고 했으니까요. ( 맞습니다. 이번 코드에서는 class가 바로 컴포넌트 입니다 ! 이 class를 더 깊게 살펴보면 여기서 클래스가 데이터와 UI 의 덩어리임을 알 수 있답니다. )
이어서 코드를 살펴보자면 이 클래스에는 생성자 함수 constructor()가 있고, 그 안에는 state라는 변수가 보이네요. 그리고 바로 아래에는 render()라는 이름의 메소드도 class내부에 존재하고 있군요. class 자체의 모습은 우리가 js에서 다뤄온 class와 다를 바 없어 보입니다. 생성자 함수와 메소드를 가진 class의 모습.
생성자 함수의 "state" 변수는 "데이터의 상태" 라고 해석하시면 됩니다. liked 속성을 false로 설정해 둔 상태입니다.
render함수는 컴포넌트의 UI를 정의해 줍니다. 다르게 말하면 render 함수의 return 부분이 바로 화면을 그리는 부분이라고 볼 수 있습니다. 우리의 코드에서는 return이 두 개 이므로 상황에 따라 다른 UI를 정의하나 봅니다. 살펴보니 버튼이 눌렸을 때의 liked의 속성은 true이며, true일 때 'You liked this'가 반환되는 코드이네요. false일 때에는 Like라는 단어가 적힌 버튼 모양이 반환되고요.
state 데이터의 상태에 맞게 변하는 화면의 모습이 그려지시나요? 실제로 해당 html 파일을 실행했을 때의 모습입니다. 위에서부터 차례로 버튼을 누르지 않았을 때와 버튼을 눌렀을 때의 UI 모습입니다.
그런데 위 코드에서 이상한 점이 한 가지 있습니다. 클래스 컴포넌트는 스크립트 태그 안에 위치하고 있으므로 javascript 언어로 코드가 작성되어야 하는데, render함수의 두 번째 return값이 button 태그입니다..? js 코드 안에 html 코드가 들어있는 셈이죠. 이게 어떻게 된 일일까요?
맨 앞에서 정의했던 세 개의 라이브러리 중 babel 라이브러리 기억하시나요? 이 바벨 라이브러리가 html 문법(여기서는 button태그) 을 우리 몰래 React.createElement로 바꿔주는 역할을 합니다. 즉 html을 리액트 방식으로 해석하는 역할을 담당해 주는 것입니다. ( 정확히는 jsx를 javascript 코드로 변환해주는 역할을 담당합니다. )클래스가 든 스크립트 태그에 타입을 babel로 설정해 두었기 때문에 가능한 일이었습니다.
이제 컴포넌트를 통해 데이터가 바뀌면 화면도 바뀌는 코드를 모두 짜 두었습니다. 그러면 이제 뭘 해야 할 차례일까요? 우리가 만들어 둔 컴포넌트를 웹 페이지에 렌더링 할 차례입니다. 🖥️
앞서 살펴봤던 ReactDOM 라이브러리가 보입니다. 해당 라이브러리는 React 컴포넌트를 웹 페이지로 렌더링하는 데 사용된다고 말씀드린 바 있습니다. 우리는 리액트를 처음 배우므로, 위 코드에도 역시 모르는 단어 투성이지만, 지금은 위 코드가 어떤 기능을 하는지만 짚고 넘어가겠습니다. "우리가 만든 클래스 컴포넌트 LikeButton을, root라는 이름을 가진 div에 렌더링하겠다" 는 의미의 코드입니다 ! 위 스크립트 태그 역시 바벨 타입 선언이 필요하죠.
리액트에서 주의할 점 몇 가지를 짚어보겠습니다.
1. 우리가 만든 컴포넌트는 무조건 대문자로 이름을 시작하도록 정의해야 합니다.
2. html 태그는 무조건 소문자여야 합니다.
3.
앞서 살펴봤던 코드 render 함수의 두 번째 return 구간인데요, 위와 같이 태그 속성에 js 문법이 들어갈 경우 반드시 시작과 끝에 중괄호를 적어주어야 합니다. 이를테면 객체의 경우라도 중괄호를 두 번 씌워주어야 하죠.
4. 리액트에서 가장 중요한 점 중 하나는 "객체를 함부로 바꾸지 마라" 입니다. 위 코드에서 button 태그 내에 "this.state.liked = true"라고 적지 않은 이유이기도 합니다. state 객체의 내용을 바꾸어선 안 되며, 같은 내용의 객체를 복제한 후 그 객체의 내용을 바꾸어야 합니다. 여기서 리액트가 새로운 객체로 복사한 코드를 한 문장으로 적을 수 있는 코드를 제공하는데요, 그게 바로 위 코드에 적혀있는 "this.setState({liked:true})" 랍니다 !
* 이는 js의 배열 메소드 중 특정 메소드들을 리액트에서 쓰지 못하는 이유가 됩니다.
배열도 객체이며, 리액트에서는 객체를 직접적으로 수정해서는 안 되기 때문입니다.
5. html보다 xml 규칙이 훨씬 엄격하고 까다로운데요. 이를테면 xml에서는 if, for문을 못 씁니다. 따라서 if문 대신 삼항연산자를 사용하고, for문 대신 map 함수를 사용합니다. 아래 코드와 같이 말이죠.
오늘도 읽어주셔서 감사합니다.
🩷🩷 좋은 하루 되세요 ! 🩷🩷
'React' 카테고리의 다른 글
| [React] 리액트 훅(react hook)이란? (4) | 2024.09.27 |
|---|---|
| [React] 리액트로 구구단 만들기 (4) | 2024.03.29 |