React '첫인상'과 JSX / state / Props

 

 

오늘 드디어 리액트를 맛봤다. 나는 자바스크립트 언어만 다룰 수 있으면 될 줄 알았는데.. 

몇 가지 문법을 맛보고 머리가 어질해졌다. 금방 익숙해지겠지.. 

리액트를 사용하는 이유 

1. 컴포넌트 단위 개발 ( 1000개의 html 문서를 다 바꾼다고 상상해보라)

2. virtual DOM 가상의 돔을 만든다 (아직 와닿진 않음)

3. 명령형이 아니라 선언형이다 (목적을 먼저 말함) 

 

---

유지보수

컴포넌트 단위로 개발을 할 수 있다는 점이 새로웠다. 확실히 유지보수하는데 좋을 것 같다는 생각이 들었다. 

 

JSX

자바스크립트 내에서 html을 쓰는 문법이다. 

image태드 같은 것도 닫는 태그가 반드시 필요하다. 

js파일 끼리 (컴포넌트 단위로) 내보내기가 반드시 필요하다 

 

export default Counter;

//이렇게 내보내고 

import Counter from './counter';

//다른 파일에서 이렇게 가져와준다

그리고 컴포넌트의 함수는 리턴값이 무조건 필요하다 

const MyFooter = ()=> {
    return <footer>푸터</footer>
};

export default MyFooter;

스타일을 지정하는 다른 방법도 있다. 

function App() {
  const name = '김은하'
  const style = {
    App: {
      backgroundColor: 'blue'
    }
  }

  const number = 5

  return (
    <div style={style.App}>
   
      <MyHeader/>
      <h2>안녕 {name}</h2>
      <b id='blod-text'>react.js
        {number}는 : {number %2 === 0? 
        "짝수" : "홀수"}
      </b>
      
    </div>
    )
    
    //이렇게 스타일을 {}안에 지정할 수 있다.

 

state

상태를 나타낸다. 인간이 배고름, 그냥 그럼 , 배부름의 상태가 있는 것처럼 상태에 따라 배고프면 먹고 배부르면 안먹고 그냥 그러면 안먹는 행동이 있을 수 있다. 

import React,{useState} from "react"; //react의 매서드인 useStat를 가져오는것 



const Counter = () => {

    //0에서 출발하고 1씩 증가하고 1씩감소하는 count 상태

    const [count, setcount] = useState(0) // 0이 초깃값

    const onIncrease =  () => {
        setcount(count +1);

    }
    const onDecrease =  () => {
        setcount(count -1);

    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEven count={count}/>
        </div>
    )
}



export default Counter;

이런 식의 예제를 배움. 

 

Props

프로퍼티스의 약자, 다른 컴포넌트의 값이나 컴포넌트 자체를 가져올 수 있다. 

 

const counterProps = {
    a:1,
    e:2,
    initialValue :3,
  } //이렇게 객체로 props 객체를 생성

  return (
    <Container>
    <div>
      <MyHeader />
      <Counter {...counterProps}/> //스프레드 구문으로 넣어준다. 
    </div></Container>
  )

이렇게 컴포넌트를 보내면 

 

const Counter = (props) => {

    //0에서 출발하고 1씩 증가하고 1씩감소하는 count 상태

    const [count, setcount] = useState(props.initialValue)

이렇게 props로 받아서 (객체로 받아지기 때문에) .표기법으로 값을 이용할 수 있다. 

 

 

 

---

유용한 내용이 많은 느낌인데 문법이 익숙하지 않다보니깐

어렵다는 생각이 드는 것같다. 개념 자체는 어려운게 하나도 없는듯!!!

많이 써서 익숙해지자! 겁먹지말자!!