HTML, CSS, JavsScript 웹개발을 편리하게 해주는 라이브러리

리액트를 쓰는 이유

1. SPA(Single Page Application)을 만들 때 사용
2. html 재사용 편리
3. 같은 문법으로 앱개발 가능

리액트 프로젝트 생성

yarn creat-react-app <프로젝트 제목>

리액트 프로젝트 시작

yarn start

• JSX문법으로 작성

1. html에 class 넣을 땐 className
2. 변수를 html에 넣을 땐(데이터바인딩) {중괄호}
3. html에 style속성 넣을 땐 style={}

• JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야한다.
• 대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환해야한다.
  ex) font-size -> fontSize

4. return()안에는 병렬로 태그 2개 이상 기입 금지

import './App.css';

function App() {
  
  const postTitle = '강남 우동 맛집'

  return (
    <div className="App">
      <div className='black-nav'>
         <h4 style={{ color: 'aqua', fontSize: '20px'}}>MY BLOG</h4>
      </div>
      <h4 id={postTitle}>{postTitle}</h4>
    </div>
  );
}

export default App;

state

변동시 자동으로 html에 반영되게 만들고 싶을 때 사용한다.
state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해준다.

만드는 법

1. import {useState}
2. useState(보관할 자료)
3. const[a, b] (a :state에 보관했던 자료 b: state 변경 도와주는 함수)
   'distructuring 문법'

state 변경하는 법

state 변경함수 (새로운 state)

state 변경함수 특징

• 기존state === 신규state 의 경우 변경안해줌

array/object

array/object 담은 변수엔 화살표만 저장됨

※ 변수1 & 변수2 화살표가 같으면 변수1 == 변수2 비교해도 true 나옴

state가 array/object라면 독립적 카피본을 만들어서 수정해야함!

컴포넌트 만드는법

1. function 만들고
2. return() 안에 html 담기
3. <함수명></함수명> 또는 <함수명/> 쓰기
   함수명은 대문자로 시작!

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

💡 return 안에 div를 병렬로 하고 싶다면
전체 html을 div로 감싸거나 <></> 사용
의미없는 div 쓰기 싫으면 <> </> 이걸로 감싸면 된다. (fragment 문법)

fragment 문법

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

• 컴포넌트 만드는법 2

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

컴포넌트로 만들면 좋은 것 ✨

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

컴포넌트의 단점 😂

한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없다.
props라는 문법을 이용해 state를 <Modal>까지 전해줘야 비로소 사용가능하다.

동적인 UI 만드는 STEP

1. html, css로 디자인 미리 완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

jsx에서 조건문 쓰는 법

jsx안에서는 if/else 문법을 사용할 수 없으므로 삼항연산자를 사용해야 한다.

조건식 ? 조건식 참일 때 실행 : 조건식 거짓일 때 실행

map() 함수

1. array 자료 갯수 만큼 함수안의 코드 실행한다.
2. 함수의 파라미터는 array안에 있던 자료이다.
3. return에 뭐 적으면 array로 담아준다.
4. 유용한 파라미터를 2개 사용할 수 있다.

 {title.map((a , i) => {
        return (
        <div className='list' key={i}>
          <h4 onClick={handleModal}>{a}<span onClick={ handleCount}>👍</span> {count}</h4>
          <p>2월 17일 발행</p>
        </div>
      )})}

props

자식이 부모의 state 가져다 쓰고 싶을 때 사용한다.

• 부모 -> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}>
2. props 파라미터 등록 후 props.작명 사용

※ props전송은 부모 -> 자식 만 가능

input

1. 입력한 데이터 코드 실행하기

<input type='text' onChange={() => {실행할 코드}} />

onChange, onInput은 <input>에 입력할 때마다 안에 있는 코드를 실행한다.

2. 입력한 데이터 저장하기
   <input>에 입력한 데이터는 state 아니면 변수에 저장해서 쓴다.

  const [input, setInput] = useState('');
return(
	<input type='text' onChange={ (e) => {setInput(e.target.value);}}
)

💡 array 형태의 state 조작은 우선 카피부터 하면된다!
💡 array 자료에서 x번 째 데이터를 삭제하고 싶으면 array자료.splice(x, 1) 으로 삭제하면 된다.