[React] Frontend Study

1. array, object state 변경하는 법

글 수정 버튼

1.1.

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

-> 확장성이 좋지 못함.

만약, array에 100개의 값이 들어있다면 코드가 길어진다.

1.2.

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

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

1.3.

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

-> 수정버튼을 클릭해도 변경이 되지 않는다!

state 변경함수 동작원리

• 기존 state === 신규 state 이렇게 먼저 검사 -> 같으면(true) 값을 변경하지 않음.
  그래서 위 코드에서도 setTitle(copy)를 해도 copy라는 변수가 기존 state와 같아서 변경을 안해준 것.

array/object 동작원리

• 자바스크립트는 array/object 자료를 하나 만들면 (ex. let arr=[1,2,3]) [1,2,3]자료는 램이라는 가상공간에 저장이 되고 arr변수엔 그 자료가 어디있는지 가리키는 화살표만 담는다.

• 그래서 let data = arr 이렇게 복사하면 data와 arr은 똑같은 값을 공유. (data를 변경하면 arr도 자동으로 변경됨. 왜냐하면 변수에는 화살표만 저장이 되었기 때문입니다.)

Spread Operator

array나 object 자료형 왼쪽에 붙일 수 있으며 괄호를 벗겨주세요 라는 뜻

let copy = [...title];
copy[0] = '여자코트 추천';
setTitle(copy)

array 값을 괄호 벗긴다음 다시 array로 만들어줍니다.

그럼 다른 완전 독립적인 array 복사본을 생성.

이런 독립적인 사본을 shallow copy 아니면 deep copy라고 합니다.

2. Component

리액트에서 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법

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

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

1. function을 이용해서 함수를 하나 만들어주고 작명합니다.

2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 됩니다.

3. 원하는 곳에서 <함수명></함수명>태그 사용

Component단점

• HTML 깔끔하게 작성하려고 Component를 수백개 만들면 그것 만으로도 관리가 힘들다.
• 하나의 함수에 있는 state를 다른 함수에서 사용하려면 props라는 문법을 이용.

3. 동적인 UI 만들기

동적인 UI 만드는 step

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

1. html css로 미리 디자인 완성

위 모달 컴포넌트 참고

2. UI의 현재 상태를 state로 저장

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

3. state에 따라 UI가 어떻게 보일지 작성

state가 true면

 <Modal />

false이면 아무것도 보이지 않게

조건식 작성 -> 삼항 연산자
조건식 ? 조건식 참일 때 실행코드 : 조건식 거짓 실행코드

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

글제목 누르면 모달창 띄우기

초기값이 false 이기 때문에 모달창이 보이지 않는다.
글제목을 클릭했을 때 state를 true로 조작해서 모달창이 보이게 구현

function App (){

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

4. map

똑같은 html이 반복된다면 반복문을 활용해서 쉽게 똑같은 html을 생성할 수 있음.
JSX 문법에서는 map()를 사용.

map 함수 사용법

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

var array = [2,3,4];
array.map(function(){
  console.log(1) // 1 1 1
});

2. 콜백함수에 파라미터를 적어주면 그 파라미터는 array 안에 있던 모든 자료를 하나씩 출력함.

var array = [2,3,4];
array.map(function(a){
  console.log(a) // 2, 3, 4
});

3. return문에 적어준 값을 array로 담아줍니다.

var array = [2,3,4];
var newArray = array.map(function(a){
  return a * 10
});
console.log(newArray) //[20, 30, 40]

JSX안에서 HTML을 반복 생성

function App (){
	let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
	return (
    	<div>
      	(생략)
      	{ 
        	title.map(function(a){
          	return (
          	<div className="list">
            	<h4>{ a }</h4>
            	<p>2월 18일 발행</p>
          	</div> )
        	}) 
      	}
    	</div>
  	)
}

function App (){
  let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
  return (
    <div>
      (생략)
      { 
        title.map(function(a, i){
          return (
          <div className="list" key={i}>
            <h4>{ title[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}