10_컴포넌트_JSX,props,useState

JSX문법

 

리액트에서 컴포넌트 생김새를 정의하는 문법으로 HTML처럼 생겼지만 사실 자바스크립트이다.

 

우리가 HTML형식으로 만들어주면 babel이 이것을 JS로 바꾸어준다.

 

babeljs.io에서 확인가능

 

위처럼 말이다. 이때 이 변환을 사용하기 위해서는 몇가지 문법을 꼭 지켜주어야 정상 변환이 된다.

 

 

1. 태그를 꼭 닫아주어야 한다.

 

리액트에서는 input이나 br태그같은 태그또한 닫아주어야 한다.

 

2. self tag

 

<input><input> 과같이 내용없이 닫히는 태그는

<input /> 로 변환하여 쓸 수 있다.

 

 

3. <>

 

function App() {
  return (
    <>
      <Hello />
      <div>나는정민규.</div>
    </>
  );
}

위처럼 <>를 사용하여 불필요한 div태그를 줄일 수 있다.

 

4. ()

 

return 이후 ()는 가독성을 위해 존재하고 굳이 없어도 작동한다.

 

5. 변수

 

import React from 'react';
import Hello from './Hello';

function App() {
  const name = '나는정민규';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

변수를 사용하고 싶으면 { 변수 }  처럼 묶어서 사용해주어야 한다.

 

 

6. style 적용

 

div 태그안에 style을 넣고싶을때 html에서는 style = " 내용 " 을 통해 정의했었는데 리액트에서는 객체를 위에 선언해 주어야 하고 사용하는 속성또한 cameCase를 사용하여 정의해주어야 한다.

 

import React from 'react';
import Hello from './Hello';

function App() {
  const name = '나는정민규';
  const style ={
    backgroundColor: 'black',
    color : 'aqua',
    fontSize : 24,
    padding : '1rem'
  }
  return (
    <>
      <Hello />
      <div style = {style}>{name}</div>
    </>
  );
}

export default App;

작동화면

7. class

 

리액트에서 class를 사용하고 싶을때는 class대신 className을 사용해야 한다.

 

 

아래는 간단히 App.css에 작은 회색박스를 만들고 적용한 예이다.

import React from 'react';
import Hello from './Hello';
import './App.css';

function App() {
  const name = '나는정민규';
  const style ={
    backgroundColor: 'black',
    color : 'aqua',
    fontSize : 24,
    padding : '1rem'
  }
  return (
    <>
      <Hello />
      <div style = {style}>{name}</div>
      <div className = "gray-box"></div>
    </>
  );
}

export default App;

8. 주석

 

주석 또한 { /* 주석내용 */ } 처럼 작성을 해야한다.

 

// 주석내용

 

도 가능하니 두 방법중 하나를 사용하면 될 것 같다.

 

 

 

 

 

 

 

pros

 

Properties 의 줄임말로 특정 값을 전달하고 싶을때 사용하는 개념이다.

 

위의 파일에서 불필요한 부분을 제거하고, 아래 코드를 한번 보자.

 

App.js파일이다.

import React from 'react';
import Hello from './Hello';
import './App.css';

function App() {
  
  return (
    <Hello name='react'/>
  );
}

export default App;

Hello컴포넌트에 name을 react로 전달해주었다.

 

import React from 'react';

function Hello(props) {
    console.log(props)
    return <div>안녕하세요 {props.name}</div>;
}


export default Hello; //hello 컴포넌트를 만들어서 내보내겠다

이때 위처럼 Hello 옆에 props를 넣어주면 name으로 넣어주었던 값이 객체로 전달되게 되고 그 값을 출력할 수 있게 된다.

 

 

 

import React from 'react';
import Hello from './Hello';
import './App.css';

function App() {
  
  return (
    <Hello name='react' color ='red'/>
  );
}

export default App;

위처럼 color를 넣어주면 두개의 값이 전달되게 된다.

 

import React from 'react';

function Hello({color,name}) {
    return <div style={{
        color
    }}>안녕하세요 {name}</div>;
}


export default Hello; //hello 컴포넌트를 만들어서 내보내겠다

전에 배웠던 비구조화 할당을 이용하면 위처럼된다. 여기서 헷갈리지 않아야 하는건 style뒤에 첫번째 {}는 자바스크립트를 의미하고 두번째 {}가 객체를 의미하게 되어서 두개의 중괄호가 들어가게 된다.

 

 

 

 

 

 

Hello.defaultProps = {
    name: '이름없음'
};

props의 값이 없는 경우에 default 값을 지정해 줄수도 있다.

 

 

 

children

 

import React from 'react';
import Hello from './Hello';

import './App.css';
import Wrapper from './Wrapper';

function App() {
  
  return (
    <Wrapper>
    <Hello name='react' color ='red'/>
    </Wrapper>
  );
}

export default App;

이번엔 app.js에 써왔던 코드를 Wrapper로 감싸준 뒤에 리액트를 연결해 주었다.

 

import React from "react";

function Wrapper({children}){
    const style = {
        border : '2px solid black',
        padding : 16
    };

    return <div style = {style}>{children}</div>
}

export default Wrapper;

위처럼 {children}으로 감싸주고 출력해 주어야 네모칸이 제대로 나오게 된다.

 

만약 감싸주지 않으면 칸이 나오지 않는다.

 

 

조건부 랜더링

 

import React from 'react';
import Hello from './Hello';

import './App.css';
import Wrapper from './Wrapper';

function App() {
  
  return (
    <Wrapper>
    <Hello name='react' color ='red' isSpecial={true}/>
    </Wrapper>
  );
}

export default App;

이번에는 isSpecial 값을 추가로 넣어주었다.

 

import React from 'react';

function Hello({color,name, isSpecial}) {
    return (
        <div style={{
            color
        }}>
            {isSpecial ? <b>*</b> : null}
            {isSpecial && <b>*</b>}
            안녕하세요 {name}</div>
    );
}


Hello.defaultProps = {
    name: '이름없음'
};


export default Hello; //hello 컴포넌트를 만들어서 내보내겠다

위처럼 삼항연산자나 and 연산자를 사용하여 값이 true이면 *가 나오게 코드를 설정해보았다.

 

두가지 케이스 모두 적용되어 *이 두 개 나오는 모습이다.

 

 

 

또한 하나의 팁으로는 isSpecial = {true} 로 할 필요없이 그냥 isSpecial만 두어도 참으로 인지하게 된다.

 

 

useState을 통한 동적 상태 관리

이번글의 마지막 기능일 것 같다.

 

 

이번에 저번에 만든 Counter 예제를 useState를 통해 구현해 보도록 하겠다.

 

 

useState를 사용하면 변하는 값들을 다룰수 있게되고 파라미터로는 처음 기본값을 받게 된다. 또한 반환이 배열로 이루어저 비구조화 할당을 하면 보다 편하게 값을 쓸 수 있다.

 

 

import react, {useState} from "react";

function Counter() {
    const [number,setNumber] = useState(0);

    const onIncrease = () =>{
        setNumber(number +1)
    }
    const onDecrease = () =>{
        setNumber(number -1)
    }

    return (
        <div>
            <h1>{number}</h1>
            <button onClick ={onIncrease}>+1</button>
            {/* onIncrease()로 쓰면 안된다*/}
            <button onClick ={onDecrease}>-1</button>
        </div>
    )
}


export default Counter;

 

useState를 통하여 변하는 값을 하나 설정해주고, 버튼이 바뀔때마다 그 값을 변환해주는 웹사이트이다. 이때 주의할 점은 button에서 onClick를 정의할때 함수를 호출하듯이 ()로 호출하면 안된다.

 

결과값