[리액트] 암기할 것 = state / props / 컴포넌트 / UI

---

State 만드는 방법

 useState('보관할 자료')

State 만드는 방법 

예시 >>

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

 

a = state 에 보관했던 자료, 변수처럼 사용. {a}

b = state 변경 함수. 함수이기 때문에 소괄호랑 같이 사용 .

 

어레이(배열 = Array)로 [ 남자코트추천, 함수 ] 이렇게 남음 

  let [글제목, set글제목] = useState([
    "남자코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);

여러 개 사용한 예시

---

State 변경 하는 방법
= State 변경함수 사용
= state 변경함수(새로운state)

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

지금 state 에 0이 담긴 상태

state를 변경하려면

따봉변경(1) 이렇게 1로 변경해줄 수 있다. 

 

새로운 state 를 소괄호 안에 써줘서

새 물건으로 교체해주는 느낌. 

누를 때마다 +1 이 되도록 state 를 변경해주려면

기존 state + 1 이니까

따봉변경(따봉+1) 해주면 된다. 

 

* state변경함수는 set을 앞에 붙이는게 관습

 

---

array, object State 변경하는 법
- 독립적인 카피본을 만들어서 수정

[...기존state] 
{...기존state} 

원본 삭제 방법 
= 비추천 방법

array 자료안의 X번째 항목을 변경하고 싶으면

array자료[X] = '바꿀값' 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목[0] = '여자코트 추천';
      글제목변경(글제목)
    } }> 수정버튼 </button>
  )
}

 

copy 본 생성해서 변경
= 추천 방법

      <button
        onClick={() => {
          let copy = [...글제목];
          copy[0] = "여자코트 추천";
          set글제목(copy);
        }}
      >
        글수정
      </button>

기존state === 신규state  

검사하고 같으면 state 변경을 해주지 않음. 

기존 - 글제목

신규 - copy 

[...] - spread operator

괄호 벗겨주고 다시 씌워달라는 문법

...[1,2,3] 이렇게 쓰면

그 자리에 1,2,3 이 남는다.

---

 destructuring 문법 = 저울 깔맞춤 

let [name, age] = ['Kim', 20]

 name = 'Kim', 

age = 20

이라는 변수가 생성

---

onClick 사용하기 
= 클릭시 뭔가 실행

<div onClick={ function(){ 실행할코드 } }>
<div onClick={ () => { 실행할코드 } }>

---

Component 만드는 방법

 

Component = 긴 HTML을 한 단어로 깔끔하게 치환

function Modal() {}

1) function 자유롭게 작성.

- 함수( function ) 만드는 위치가 중요

= 다른 function 바깥에 만들기.

=  function App(){} 내부에서 만들면 안된다.

function App(){} 이것도 다시보니 컴포넌트 생성문법이기 때문에.

 

component 안에 component 를 만들진 않음.

 

- 작명은 영어 대문자

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

 

2) return 소괄호를 function 안에다가 생성

- 소괄호 안에다가 축약할 html 을 담기

    <Modal></Modal>

컴포넌트 Modal 생성 완료

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

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

화살표 함수로도 사용 가능 

function Modal(){
  return ( <div></div> )
}

let Modal = () => {
  return ( <div></div>) 
}

---

UI 만드는 방법

1. html css로 미리 UI 디자인을 다 해놓고

2. UI의 현재 상태를 state로 저장해두고
= 리모컨 버튼 만들기

- state 하나 만들고

거기에 현재 UI의 상태정보를 저장

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

 

3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
= 어떤 상황에 리모컨 버튼 누를 지

- 모달창의 상태만 표현

열림 / 닫힘 이 두개 상태밖에 없기 때문에

그거 2종류만 표현할 수 있는 자료형

let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

 if문 대신 쓸 수 있는 문법. 삼항연산자 사용해서 조건문으로 작성하기

삼항연산자
= 조건문
= 이런 상황일 때 리모컨 버튼 누르기.

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

 {modal == true ? <Modal /> : null}

modal(state) 가 true 면 ( true와 같으면) = 조건문

왼쪽 부분 실행시키기

*null = 아무것도 보여주지 않음. 

토글형식으로 보여주기
= 버튼 왔다갔다 하면서 누를 수 있는 것

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

 

!modal 사용해서 토글형식으로 생성. 

버튼 누르면 작동

 

---

자바스크립트 map 함수 쓰는 법
- 모든 array 자료 우측엔 map() 함수 사용 가능
- ForEach 문과 유사

 

map 함수 괄호 안에는 이렇게 콜백함수 넣기

기능 1) array에 들어있는 자료갯수만큼
그 안에 있는 코드를 반복실행

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});

console.log(1) 3번 실행됨.

기능 2) 콜백함수에 파라미터 아무렇게나 작명하면
그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

파라미터 a
= 반복문이 돌때 마다 
array 안에 있던 하나하나의 데이터
2, 3, 4가 콘솔창에 출력

기능3) return 오른쪽에 뭐 적으면 array로 담아줌.

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray)

newArray는 [20, 30, 40] 이 출력

 map 반복문으로 반복생성한 html엔 key={i} 추가

 {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
              }}
            >
              {글제목[i]}
              <span
                onClick={() => {
                  set따봉(따봉 + 1);
                }}
              >
                👍
              </span>
              {따봉}
            </h4>
            <p>2월 18일 발행</p>
          </div>
        );
      })}

map 반복문으로 반복생성한 html엔

key={i} 이런 속성을 추가해야함. 

i 집어넣으면 반복문 돌 때마다 0, 1, 2 이렇게 됨 

- div 마다 각각 다른 키 값 가질 수 있다.

---

글제목 3개, 반복문으로 만들기

   { 
        글제목.map(function(){
          return (
          <div className="list">
            <h4>{ 글제목[0] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }

글제목이라는 state도

array자료라서 map 함수 붙일 수 있다. 

let [글제목, set글제목] = useState([
    "남자코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);

state 이거였음. 

반복문으로 만든거 글제목 수정하기
= 하드코딩 하지않기
- 1) 파라미터 a 사용하는 방법

반복문이 돌 때마다

<h4>{ 글제목[0] }</h4>

<h4>{ 글제목[1] }</h4>

<h4>{ 글제목[2] }</h4>

이렇게 데이터 들어가게 만들기.

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

a 파라미터 사용 

= array 안에 있던 하나하나의 데이터

 

변수처럼 쓰임. 

 

 a 출력해보면 반복문이 돌 때 마다

차례로 '남자 코트추천' '강남 우동 맛집' 이런 데이터들이 됨. 

반복문으로 만든거 글제목 수정하기
- 2) 파라미터 i 사용하는 방법

{글제목.map(function (a, i) {
        return (
          <div className="list">
            <h4>{글제목[i]}</h4>
            <p>2월 18일 발행</p>
          </div>
        );
      })}

i 를 사용해서 동일결과 얻기. 

i를 출력해보면 0, 1, 2 이렇게 인덱스 처럼 출력

아까 만들었던 Modal 창 달아주기.

// 컴포넌트 생성하기.
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

아까 만들었던 모달창 컴포넌트

      {글제목.map(function (a, i) {
        return (
          <div className="list">
            <h4
              onClick={() => {
                setModal(!modal);
              }}
            >
              {글제목[i]}
            </h4>
            <p>2월 18일 발행</p>
          </div>
        );
      })}

달아준 모습

---

props 전송하는 법 
- 자식 컴포넌트가 부모 컴포넌트에 있던 state 사용

 

첫 번째 블로그 글을 제목 란에다가 집어넣기

// 컴포넌트 생성하기.
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

state를 넣는 식으로 사용해보자.

<Modal> 컴포넌트 안에 글제목 state 가 필요함.
그러나 글제목 state 는 App 컴포넌트 안에 있음.

 

state 변수는 function App()에 있지 function Modal()에 없음.

1) 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} /> 
= 보통 작명을 State 이름과 동일하게 짓는다.

   {modal == true ? <Modal 글제목={글제목} /> : null}

2) 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록

// 컴포넌트 생성하기.
function Modal(props) {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

props 파라미터로 넣어줌.

= 소괄호 안에 넣어주면 된다. 

3) { props.작명 }사용

// 컴포넌트 생성하기.
function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

글제목이라는 state 는 array 배열 전부 다 나온다.

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이렇게 쓰면 0번째 만 나옴.

state 뿐만 아니라 state 변경함수도 props 적용 가능

  let [글제목, set글제목] = useState([
    "남자코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);

글제목 변경함수 인 set글제목 

// 컴포넌트 생성하기.
function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          set글제목();
        }}
      >
        글수정
      </button>
    </div>
  );
}

button 누르면 글제목 변경하고 싶음. 

 {modal == true ? <Modal set글제목={set글제목} 글제목={글제목} /> : null}

모달창 컴포넌트 있는 곳으로 가서 props 연결할 것 추가해줌.

- 1번 방법

function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          props.set글제목(["어쩌구 코트 추천", "강남우동맛집", "파이썬독학"]);
        }}
      >
        글수정
      </button>
    </div>
  );
}

---

0번 글을 누르면 0번 글제목이 모달창안에 등장하고
1번 글을 누르면 1번 글제목이 모달창안에 등장
= 현재 UI의 상태를 state로 만들어두기
= 버튼 생성하기

let [title, setTitle] = useState(0);

 글제목은 0번글이 보이거나 1번글이 보이거나 2번글이 보이거나 하도록 숫자로 표현

// 컴포넌트 생성하기.
function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          props.set글제목(["어쩌구 코트 추천", "강남우동맛집", "파이썬독학"]);
        }}
      >
        글수정
      </button>
    </div>
  );
}

이렇게 만들어놓은 title 스테이트를 쓰고 싶지만

App 함수에 만들어놓은 거라서 props 를 써야함.

     {modal == true ? (
        <Modal title={title} set글제목={set글제목} 글제목={글제목} />
      ) : null}

Modal 컴포넌트에 쓸 거니까,

Modal 컴포넌트가 생성된 곳 = <Modal/> 을 찾아가기

그리고 props 준비해줌.

 <h4>{props.글제목[props.title]}</h4>

이렇게 Modal 쪽에 props 넣어줌.

state 를 스위치 처럼 사용하기.

---

0번 글을 클릭하면 title이라는 스위치를 0으로 바꿔주고
1번 글을 클릭하면 title이라는 스위치를 1로 바꿔주고
2번 글을 클릭하면 title이라는 스위치를 2로 바꿔주기

function App (){
  let [title, setTitle] = useState(0);
  return (
    <div>
      <button onClick={()=>{ setTitle(0) }}> 0번글 </button>
      <button onClick={()=>{ setTitle(1) }}> 1번글 </button>
      <button onClick={()=>{ setTitle(2) }}> 2번글 </button>
      <Modal 어쩌구/>
    </div>
  )
}

onClick과 title 변경함수를 사용해서 각각의 글 뜨게 가능.

function App (){
  return (
    <div>
      { 
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4 onClick={()=>{ setModal(true); setTitle(i); }}>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

map 함수에 활용