react

return (
    <div className="App">
      <div className="black-nav">
        <div>Blog</div>
      </div>
      <button> 냥 </button>
      <div className="list">
        <h3>
          {post[0]}
          <span
            onClick={() => {setPlus(plus + 1);}}>
            ♥
          </span>
           {plus}
        </h3>
        <p> 7월 28일 발행 </p>
        <hr />
      </div>
      <div className="list">
        <h3> {post[1]} </h3>
        <p> 7월 28일 발행 </p>
        <hr />
      </div>
      <div className="list">
        <h3>{post[2]}</h3>
        <p> 7월 28일 발행 </p>
        <hr />
      </div>
    </div>
  );
}

jsx (확장문법)

- class넣을땐 className사용

 

- 변수 넣을 때{   }  중괄호 사용 = 데이터바인딩 {서버에서 데이터를 가져와서 사이사이에 넣음}

 

- style 넣을땐 style={ { 스타일명:'값' } } 괄호안엔 오브젝트,스타일명작성시 바사용 안됨 카멜케이스로 기입 

 

state

const [post, setPost] = useState([
    "귀여운 고양이가 궁금해?",
    "귀여운 강아지",
    "귀여운 햄스터"
  ]);
  const [plus, setPlus] = useState(0);

state 사용중인 html 자동 재렌더링됨

 

문법

const [변수, state변경할수있게 도와주는 함수] = useState();

 

state 변경방법

<span
            onClick={() => {
              setPlus(plus + 1);
            }}
          >

{state변경용 함수 (새로운 state)}

 

      <button
        onClick={() => {
          let copy = [...post];
          copy[0] = "귀여운 강아지가 궁금해?";
          setPost(copy);
        }}
      >
        냥
      </button>

state 변경함수특징

기존존 state== 신구 state 의 경우 동작 안함

[...] 괄호 벗겼다 다시 씌어줌 

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

 

 

이벤트핸들러

onClick ={ 함수이름을 넣어야함 }

function 하던지, 화살표함수 {() => {  }}

 

 

Component 

function Modal() { //함수명 첫글자 대문자로 
retrun ( 
<div>
<h1>냥</h1>
</div>
//축약 html담기

<>
</>
//의미없이 div하기싫으면 이렇게 작성도 가능

<div></div>
//이렇게는 안됨 
)
}

사용법

function -> return () 안에 html담기 ->  <함수명></함수명>, <함수명 /> 쓰기

 

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

1. 반복적인 html축약 할 때

2. 큰 페이지들

3. 자주 변경되는 것들 

 

단점

state 가져쓸때 문제가 생김 (a함수에 있던 변수를 b함수에서 맘대로 가져다 쓸 수 없다)

너무 남발하면 좋지않아요