[React] 정리1

JSX 문법 1. html에 class 넣을 땐 className

• JSX는 html과 사용방식이 비슷함.
• 그러나 일종의 자바스크립트이기 때문에, js에서 사용하는 예약어인 class 키워드를 사용할 수 없음.
  대신 className을 사용한다.

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}를 사용

let post = '~~~';
<div>{post}</div>

• {} 중괄호를 열어 변수를 집어넣을 수 있음. (href,id,className,src 등)

JSX 문법 3. html에 style 속성 넣고 싶으면 style={} 안에 {} 자료형으로

<div style={{color:'blue',fontSize:'30px'}}> 어쩌구 </div>

• { 속성명 : '속성값' } 이렇게 넣으면 됨.

• font-size 처럼 속성명에 대쉬기호(-)를 쓸 수 없음.

  대쉬기호 대신 모든 단어를 붙여 써야함. 붙여쓸 땐 앞글자를 대문자로 치환해야함.

JSX 문법 4. 중요한 데이터를 저장할 땐 변수 대신 state를 만들기

• state 만드는 법

  1) 맨 윗줄에 import {useState} from 'react'
  2) 원하는 곳에서 useState('보관할 자료')
  3) [state 이름,setState 함수] = useState('state에 담을 값');

let [a,b] = useState('여자 크롭티 추천');

• useState() : [데이터1,데이터2]

  데이터 1 : '여자 크롭티 추천' 같은 자료가 들어있음.

  데이터 2 : state 변경을 도와주는 함수가 들어있음.

• 리액트에서는 일반 변수 대신 state 를 이용해도 자료를 잠깐 저장해 둘 수 있다.

• 변수 말고 state에 데이터를 저장해서 쓰는 이유?

  state는 변동사항이 생기면 state를 바인딩하는 html도 자동으로 재렌더링 해준다.

  UI 기능 개발 편리해짐!

즉, 바뀌지 않는 데이터들은 state로 굳이 저장할 필요가 없지만, 변경 사항이 많을 데이터들은 state로 저장하는 것이 좋은 관습이다.

JS destructing 문법

Array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을 때 쓰는 문법

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

왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 알아서 변수가 생성됨.
name에는 'Kim', age=20이 담김.

JSX 문법 5. onClick 사용법

<div onClick = {실행할 함수}>

1) Click이 대문자.
2) {} 중괄호 사용.
3) 그냥 코드가 아닌, 함수를 넣어야 동작함.

JSX 문법 6. State 변경하는 법

State는 state 변경 함수를 써서 state를 변경해야 함! 그래야 html 재렌더링이 됨.

let [a,b] = useState(0);
//여기서 b가 state 변경 함수.
b(1);
// 이렇게 하면 a가 0에서 1로 변경됨.

• state 변경 함수는 () 안에 넣은 값으로 state를 변경해주는 함수다.

Array, object state 변경하는 법

• array,object 자료를 다룰 때는, 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드를 짜는 것이 좋은 습관이다.

let [title,title_edit] = useState(['가나','다라','마바']);
return(
  <button onClick = {()=>{
      let copy = [...title];	  //원본 복사해두기
      copy[0] = '사아';
      title_edit(copy);
    }}>버튼</button>
)

State 변경함수 동작원리

• state 변경함수를 쓸 때, 기존 state == 신규 state 로 먼저 검사함.
• 같으면 state 변경을 해주지 않음.

array,object 동작원리

• js는 array/object 자료를 하나 만들면,
  ex) let arr = [1,2,3][1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고, let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있음.
• 그래서 array/object 자료를 복사하면 이상한 일이 일어나는데,

let data1 = [1,2,3];
let data2 = data1;

이렇게 하면, data1과 data2는 각각 [1,2,3]을 별개로 저장하는 게 아니라, 똑같은 값을 공유하게 됨.
그래서 data1을 변경하면 data2 값도 변경됨. 왜냐하면 변수에는 자료를 가리키는 화살표만 저장되므로, 화살표를 복사한게 되니까 같은 자료를 가리키는 것이 되는 것.
그래서 같은 화살표를 가지고 있는 변수끼리는 등호로 비교해도 똑같다고 나오는 것.
따라서 array를 복사할 때, spread operator를 사용하여 복사하면, 다른 화살표가 될 수 있음.

spread operator

• ...[1,2,3] : 이렇게 쓰면 1,2,3 이 남는다. 괄호 벗기기용
• 또 다른 용도로는 array나 object 자료형을 복사할 때 많이 사용함.

let data1 = [1,2,3];
let data2 = [...data1];
// data1에 있던 자료들을 괄호 벗긴담에 다시 array로 만들어 주세요
// 따라서 data1과 data2 는 완전 독립적인 array가 됨.

• 정리

  리액트에서 array/object state를 수정하고 싶으면 독립적인 copy 를 하는 것이 좋다.
  [...기존 state] 또는 {...기존 object}

Component 문법

• 목적 : 긴 HTML 을 한 단어로 깔끔하게 치환해서 넣을 수 있음.
• 예시

funcion Modal(){
  return (
    <div>...</div>
  )
}
function App(){
  return(
    <Modal></Modal>
  )
}

1) function 을 이용해서 함수를 하나 만들고 작명한다.
2) 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다.
3) 원하는 곳에 <함수명></함수명> 을 사용하여 축약한 HTML을 사용한다.

- 이렇게 축약한 HTML을 COMPONENT 라고 부른다.

• 주의점 :

  1) component를 작명할 땐, 영어대문자로 보통 작명함.
  2) return () 안에는 html 태그들이 평행하게 여러개 들어갈 수 있다.
  3) Component 안에 component를 만들지 않는다.
  4) <Component></Component> 또는 <Component/> 로 작성할 수 있다.

• 추가 :

  Arrow function 을 사용해도 됨.

  let Modal=()=>{
    return (<div>담고 싶은 html 코드</div>)
  }

• 어떤 HTML들을 Component로 만들면 좋을까?

  1) 사이트에 반복해서 출현하는 HTML 덩어리들
  2) 내용이 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋음.
  3) 다른 페이지를 만들고 싶다면, 그 페이지의 HTML 내용을 하나의 Component로 만드는 게 좋음.
  4) 다른 팀원과 협업시 웹 페이지를 Component 단위로 나눠서 작업을 분배하면 좋음.

• Component 의 단점

  Component를 너무 많이 만들면 관리가 어려움.
  예를 들어, function modal 안에 어떤 state를 쓸 수 없는데, js에서는 한 function 안에 있는 변수를 다른 function 에서 맘대로 쓸 수 없기 때문이다. (props 문법을 이용해야 다른 Component에서 사용 가능함)

리액트에서 동적인 UI 만드는 Step

1) html,css로 미리 UI 디자인을 해둔다.
2) UI 의 현재 상태를 state로 저장해두고
3) state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성한다.

JSX 문법 7.조건절

삼항연산자 사용.(if/else 문법 바로 사용할 수 없음.)

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

• 아무 html도 넘기고 싶지 않을 때 : null 사용

JSX 문법 8. 똑같은 html 반복 출현할 때, map() 함수

• JSX 에서는 for 반복문을 중괄호 안에 사용할 수 없기 때문에, map()을 대신 사용함.
• 모든 array 자료형 우측엔 map() 함수를 적용할 수 있음.

var arr = [1.2.3];
arr.map(function(){
  console.log('~~')
});
//arr에 들어있는 자료형의 갯수만큼 안에 있는 코드를 실행함.
var newArr = arr.map(function(ele){return ele*10});
//map 함수는 결과값으로 array를 return 함
arr.map(function(e,i){
  console.log(arr[i]);
});
//map 함수에 파라미터 두개를 작성하면 첫번재 파라미터는 원소값, 두번재 파라미터는 원소의 인덱스가 됨.

• 참고 : map 반복문으로 반복생성한 html 안엔 key={index} 같은 속성을 추가해야 한다.

JSX 문법 9. 자식이 부모의 State를 가져다 쓰고 싶을 때는? Props

• 자식 component 가 부모 component 에 있던 state를 쓰고 싶다면, props로 전송해서 써야한다.

  1) 자식컴포넌트를 사용하는 곳에서 <자식컴포넌트 작명 ={state이름}/>
  2) 자식컴포넌트 만드는 function에서 props라는 파라미터 등록 후 props.작명 사용
• 예시

//부모 컴포넌트
function App (){
  let [글제목, 글제목변경] = useState(['모니터 추천', '키보드 추천', 'JAVASCRIPT']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}
//자식 컴포넌트
function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• 참고

  1) props는 <Modal p1={p1} p2={p2} ... > 무한히 전송이 가능하다.
  2) 꼭 state만 전송할 수 있는 것은 아니다. 일반 변수, 함수 전송 가능하고, 일반 문자전송도 가능함.
  <Modal 글제목 = {일반 변수 or 함수}>
<Modal 글제목 = "새로운 제목">
  3) 자식->부모 전송은 불가능함.
  4) 자식<->자식 전송또한 불가능함.

• props는 함수 파라미터 문법과 똑같다.

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

라고 짰다면, props.color로 구멍을 뚫어놓은 것과 마찬가지. 컴포넌트를 사용할 때,
<Modal color={'skyblue'}/> 이런식으로 사용하면, background color가 skyblue가 될것임.