리액트 공부1. 기초 JSX 사용법 (리액트의 자바스크립트)

1. 태그에 class를 주고싶으면?

<div className = "클래스명"> </div>

//App.js
	<div className="black-nav">
        <div>개발 Blog</div>
    </div>
    
//App.css
body{
  font-family: 'nanumsquare';
}

.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;

}

일반 HTML과 CSS와 비슷하게 작성 가능하다.

 

2. 리액트에서 데이터 바인딩 쉽게하는 법

데이터 바인딩 : 서버에서 데이터를 가져와서 들고다니는 것

 

기존 방식

 document.getElementById().innerHTML = ''? //이런식으로 데이터를 가져오거나
 let posts = '고기 맛집 리스트'; //이런식으로 변수를 지정

리액트 앵귤러 뷰등을 사용하면

<h4> { 변수명 } </h4>

이런식으로 훨씬 쉽게 데이터를 클라이언트에 보여줄 수 있다.

 

심지어 함수도 넣어줄 수 있다.

function 함수() {
	return 100
}

<h4> { 함수() } </h4>

이러면 리턴값이 클라이언트에 보여진다.

이렇게  { } 안에 src, id, href등의 속성을 변수명, 함수로 바꿔서 넣어줄 수도있다.

<div style={ { color : 'blue', fontSize : '30px' } }>개발 Blog</div>

css등을 집어넣을때 style을 사용할 수 있다. 대신 오브젝트 형식으로 넣어야한다.

function App() {

    let posts = { color : 'blue', fontSize : '30px' }

  return (
    <div className="App">
      <div className="black-nav">
        <div style={ posts }>개발 Blog</div>
      </div>
        <h4>개발 블로그</h4>
    </div>
  );
}

이런식으로 style={}문법으로 변수를 만들어 사용할수도있다.

 

3. state

지금까지는 데이터를 변수에 저장하여 가지고다니는 방법을 알아봤다.

state는 변수에 보관하지 않고 따로 보관하는 것

import React, {userState} from 'react';

맨위에 useState를 임포트한 후 

let [글제목, 글제목변경] =  useState('남자 코트 추천');

useState는 두개의 공간을 가지고 있다. 각각 '글제목'과 '글제목변경' 에 두가지를 담아줌,

'글제목'이라는 변수에는 '남자 코트 추천' 이 담겨있고 '글제목변경'이라는 변수에는 앞의 데이터를 변경하는 함수가 들어있다.

<h4> {글제목}</h4>

이렇게 사용하면 앞에 변수를 사용한것과 똑같은 결과를 보여준다. 이를 변수 대신에 쓸 수 있는 state라는 문법이다.

 

즉 정리하면

1. 변수 대신 쓰는 데이터 저장공간

2. useState()를 이용해 만들어야함

3. 문자, 숫자, array, object 다 저장 가능

 

state를 사용하면 리액트를 웹앱처럼 동작하게 만들 수 있다.

state는 변경이 될 때 데이터를 담고있는 HTML이 자동으로 재렌더링 된다. 즉 새로고침을 안해도 바뀜

변수를 사용할 경우 데이터가 변경되면 새로고침을 해야 바뀐다.

 

4.이벤트 리스너(핸들러)

let [따봉, 따봉변경] = useState(0);

<h4> {글제목[0]} <span onClick={ ()=>{ 따봉변경(따봉 + 1) } }>👍</span> {따봉} </h4>

state에 변경함수를 이용하여 따봉이라는 state의 값이 클릭할때마다 변경되게 만들 수 있다

function 따봉체인지() {
        return 따봉변경(따봉 + 1);
    }
    
<h4> {글제목[0]} <span onClick={ 따봉체인지 }>👍</span> {따봉} </h4>

혹은 이런식으로 함수를 만들어서 사용할 수도있다.

 

5. state변경하는 법

Array, Object state 데이터를 수정하려면 일단 변경함수를 써야한다.

변경함수(대체할 데이터)를 입력해주면 된다.

function 제목바꾸기() {
        let newArray = [...글제목]; //deep copy, reference data tpye 특징 (참조형 데이터)
        newArray[0] = '여자 코트 추천';
        글제목변경(newArray); //state를 아예 대체하는 함수
    }
<button onClick={ 제목바꾸기 }>버튼</button>    
    
글제목[0] = "이렇게하면 안되요" //이런식으로 state를 직접 변경하면 안됨

만약 let newArray = [글제목] 이렇게하면 값이 복사가 되지않고 참조가 된다.

state를 직접 건드리는건 권장사항이 아니다. 

 

만약 정렬을 하고싶다면?

    function sortedTitle() {
        let newArray = [...글제목];
        newArray.sort();
        글제목변경(newArray)
    }
<button onClick={ sortedTitle }>버튼</button>

위와같은 방식으로 정렬을 할 수 있다.

 

6.Component

HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component문법

fucntion App(){
	return(
    ....
    ...
    ..
    .
    <Modal/>
    )
}


function Modal() {
    return(
        <div className="modal">
            <h2>제목</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

Component만드는 법

1. 함수 만들고 이름 짓고

2. 축약을 원하는 HTML을 넣고

3. 원하는 곳에서 <함수명/> 혹은 <함수명></함수명>

4. 만드는 위치는 fucntionApp() 밖에다 만들어야함 <functionApp도 하나의 Component임>

 

어떤걸 Component로 만드는게 좋을까?

- 반복출현하는 HTML 덩어리들

- 자주 변경되는 HTML UI들 

단점

-state쓸때 복잡해짐 (상위 component에서 만든 state 쓰려면 props문법 이용해야함)