리액트는 자바스크립트 라이브러리 중의 하나이다. 그렇다면 라이브러리란 뭘까?
Library
라이브러리란 유용한 함수 메소드의 꾸러미라고 생각하면 될 것 같다. 라이브러리를 통해 코드 쓰는 시간의 약 20% 정도를 줄일수 있다고 한다 와우! 예전에 개발자들이 자주 쓰던 jQuery또한 라이브러리 중의 하나이다!
React의 폴더 구성
글만 쓰는게 싫어서 캡쳐한 후 설명을 달았습니다..ㅎㅎ;;
create-react-app 디렉토리이름 명령어를 입력하고 VS코드를 열어보면 이러한 파일들이 있을건데요, 우리는 여기서 src폴더에 Component와 js,css 파일들을 만들고 그것을 통해 웹페이지를 구현할 거에요!
그렇다면 리액트에는 어떠한 요소들이 있을지 하나하나 살펴봅시다~
JSX(Javascript XML)
html문법을 javascript파일 안에다가 쓴 것. 이것은 js도 html도 아니기 때문에 React 내에서 이걸 페이지내에서 읽히도록 Compile 해주는 과정이 들어갑니다~
기억해야 할 것들…
- 중첩된 요소는 소괄호 닫아주기.
const good = (
<div>
<p>hi</p>
</div>
);- 하나의 태그로 시작쓰.
const wrong = (
<p>list1</p>
<p>list2</p>
);이렇게 쓰면 안됩니다! 제대로 쓰려면 저 두 p태그들을 하나로 묶어주는 div가 필요합니다~
- class나 id 말고 className 쓰기
<p className="sleepy">넘나 졸려요</p> - 주석처리 할 때 태그 사이는
//, 바깥은{/**/}이렇게! 이건 어차피ctrl+shift하면 자동으로 입력 되니까 일단 알아만 두세요~
Component
컴포넌트는 요소라는 뜻인데, 나라라고 생각하면 됩니다! 여러 나라들의 협력을 통해서 지구(Web page)에 메시지를 띄워서 외계인(user)한테 보내는거라고 생각해봅시다 ㅎ
근데 중요한 점은 단순히 여러개가 합쳐져서 하나를 만드는 것이 아닌, 동일한 것이 있다면 비효율적인 작업을 줄여주는 재사용 가능한 함수에요. 마치 js에서의 class처럼~
컴포넌트는 함수형과 클래스형 둘로 나뉘는데, 그 전에 컴포넌트를 한번 파헤쳐봅시다.
컴포넌트파일이 같은 폴더에 있다고 해도 각각의 파일은 아예 다른 나라라고 생각하면 됩니다. 국경을 넘으려면 수출과 수입을 해야 해요! 자세한 설명은 그림을 참고하시면 됩니다. 이렇게 여러 나라의 협력을 통해서…
이렇게 외계인에게 보낼 메시지를 띄울 수 있는거죠! 자 그럼 함수형과 클래스형 컴포넌트에 대해 간단히 짚고 넘어갑시다.
함수형
const Hungry = (props) => {
return <h1>I am hungry. Please give me your {props.name} </h1>;
}클래스형
class Hungry extends React.Component {
render() {
return <h1>I am hungry. Please give me your {props.name} </h1>;
}
}여기서 공통점이 보이시나요? 네 맞습니다! component는 늘 대문자로 써야해요.
차이점을 볼까요? 함수형과 달리 클래스형은 return 전에 render()를 꼭 써야합니다. 그렇다면 props라는건 뭘까요?!
props
props는 properties의 줄임말로 js에서의 객체와 똑같은 의미인데요, 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 값입니다. 함수형 컴포넌트에선 props가 인자로 들어갑니다. 위에서 봤던 hungry함수를 받아서 쓰는 컴포넌트가 있으면 결과값이 나오겠죠? 봅시다!
import React, { Component } from 'react';
import Hungry from './Hungry';
class Food extends Component {
render() {
return (
<Hungry name="chicken" />
);
}
}
export default Food;Hungry컴포넌트와 Food컴포넌트가 합쳐져서 I am hungry. Please give me your chicken 라는 메시지가 완성됩니다. 물론 외계인에게 보여주려면 ReactDOM.render 함수도 따로 써줘야하겠죠~?
props말고 state라는 값도 있는데 그건 class 내부에서만 쓸 수 있는 성질이에요.
state
말 그대로 컴포넌트의 상태를 말합니다. props와 마찬가지로 객체에요! 이걸 사용하려면 constructor 내부에 꼭 this.state = {}이런 식으로 초기화를 해줘야합니다~ 그러고 나서 함수안에 this.setState()라는 식을 통해 state의 상태값을 바꿔줄 수 있어요. 예리킴님의 블로그에서 퍼온 아래의 코드를 함께 살펴봅시다~
class Button extends React.Component {
constructor() {
super();
this.state = {
click: false
}
}
render() {
return (
<div
className="btn"
onClick={()=>{this.setState({ click: !this.state.click })}}
>
{this.state.click ? '좋아요' : '싫어요'}
</div>
);
}
}
ReactDOM.render(
<Button />,
document.getElementById('root')
);클릭을 할 때마다 좋아요 혹은 싫어요가 번갈아 가면서 나오는 코드입니다.
먼저 생성자 함수 내부에서 state의 click값이 false로 초기화 된 상태인데요! onClick함수 내의 setState함수에서 click이라는 state값이 ! 부정되었기 때문에 클릭을 한번 하면 true가 되겠죠? 그 다음엔 삼항연산자에서 true면 좋아요, false면 싫어요가 나오게 됩니다. onClick 함수 내부의 ! 때문에 클릭을 할 때마다 true, false값이 계속해서 바뀌게 되는거죠~
분명 이렇게 이해하면 잘 알겠는데, 왜 항상 활용은 어려울까요.. ㅠㅠ 지난번에 만든 미니트위터를 Component 형식으로 쪼개는 것부터 props와 state를 이용해 데이터 값을 바꿔주는데 애를 먹고있네요 큽… 하다 보면 늘겠죠????????