코딩애플 'React' / 1

 

 

 

 

 

 

 

 

app.js > 메인페이지
jsx > js 파일에서 쓰는 html 대용품

 

 

jsx에서 html에 class넣을때는 className 이라고써줘야함

 

 

데이터는 이런식으로 바인딩함

function App() {

  let post = '잉잉잉';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={post}>블로그</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

 

 

 

스타일은 이렇게 넣음

<h4 style={{color:'pink'}}>스타일</h4>

 

 

 

뺄셈 기호는 쓰면안되고, 카멜표기법으로 다 작성해야함

(예시; font-size > fontSize)

 

 

 

 

return문 안에는 병렬로 태그 1개이상 기입하면 안됨

 

 

 

 

자료를 '잠깐' 저장할때는 useState 써도된다 (아래는 임포트문)

아니면 자주 변경될거같은 html 내용들은 useState로 만들기

import {useState} from 'react';

 

 

 

let [a,b] = useState('남자 코트 추천');

<h4>{a}</h4>

// 이렇게 하면 a에 '남자 코트 추천'이 나온다

 

 

 

Array안에 있던 자료들을 각각 변수로 빼는것을 '디스트럭처링'문법이라고 한다

 

 

let [a,b] = useState(['남자 코트 추천','여자 코트 추천','강아지 코트 추천']);

// 이런식으로 바인딩 하고 꺼낼때는 a[0] 이렇게 꺼내도됨 

 

 

 

 

onClick안에는 함수를 넣어야함 그래서 그냥 바깥에 함수를 만들어서 onclick에는 함수명만 써도 되고, 

아예 onclick안에 기능 구현된 함수 자체를 넣어버려도 된다

 

 

 

state 변경함수

let [상태값,상태값 변경 함수]

 

 

array나 object는 원본을 훼손하지 말고 카피본을 만들어서 관리하는게 좋다

 

 

 

useState변경함수 특징은, 기존state == 신규state 일경우 변경 안해줌

array,object에 저장된 값들은 lam에 저장이 되고 배열의 변수는 그냥 그 값들이 어느위치에 있는지만 화살표로 알려준다

그래서 그럴땐 ... 이 점세개 문법을 쓰는데 이게, 화살표를 새로 바꿔주세요~ 괄호를 벗겨주세요~ 이런의미이다

 

 

 

 let [a,b] = useState(['남자 코트 추천','여자 코트 추천','강아지 코트 추천']);
 
 <button onClick={()=>{
        // 배열 복사먼저 해주기
        let copy = [...a];
        // 정렬
        copy.sort();
        // 배열 재설정
        b(copy);
      }}>가나다정렬</button>

 

 

 

 

<컴포넌트 만드는법>

1. function 만들기

2. retrun() 안에 html 담기

3. <함수명></함수명>쓰기

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

// 이런식으로 만든다

 

 

 

// 이런식으로 모달을 만들수도 있다
const modal = () => {}

 

 

 

<동적인 UI만드는 방법>
1. html/css로 미리 디자인 완성
2. ui의 현재상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 저장

 

 

 let [modal,setModal] = useState(false);

// 모달의 상태 저장해놓고

 

<h4 onClick={()=>{setModal(true)}}>{a[2]}</h4>

// 온클릭 이벤트를 이용해 모달의 상태를 변경해준다

 

 {

        modal == true ? <Modal/> : null

 }

 

// 삼항연산자를 이용해 참이면 모달 열고, 아니면 닫는..그런식으로 !!

 

 

 

 

비슷한 html 많이 생성하려면 map 쓰면됨