[ 코딩애플 ] React 리액트 기초 Part3

✏️ 번외) fragment 문법

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

- HTML 코드를 짤 때, return() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함!
- 그래서 굳이 <div> 두개를 나란히 적고 싶으면 위와 같이 하나의 div로 또 감싸거나, <></>로 감싸야 함!

 

✏️ Component

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

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

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

1) 줄이는 법
   1. function을 이용해 함수를 하나 만들고 작명.
   2. 그 함수 안에 return() 안에 축약을 원하는 HTML 담음.
   3. 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML 등장.

- 이렇게 축약한 HTML 덩어리를 Component라고 부름!

2) Component 만들 때 주의점
- component 작명할 땐 영어 대문자로 보통 작명
- return() 안에 HTML 태그들이 평행하게 여러 개 들어갈 수 X
- function App(){} 내부에서 만들면 X
- <컴포넌트></컴포넌트> 또는 <컴포넌트/>

3) 어떤 HTML들을 Component로 만드는 게 좋을까
- 사이트에 반복해서 출현하는 HTML 덩어리들
- 내용이 자주 변경될 것 같은 HTML 부분
- 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용
- 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나워서 작업 분배 등등..

4) Component의 단점
- Component를 수백개 만들면 관리가 어려움, 너무 쪼개지 말고 꼭 필요한 곳만 Component로 쪼개 사용할 것!

 

✏️ 동적인 UI 만드는 Step(모달창 기능)

step 1. html css 미리 디자인해놓기.
step 2. UI의 현재 상태를 state로 저장.

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

- state를 하나 만들고 거기에 현재 UI의 상태 정보를 저장
step 3. state에 따라 UI가 어떻게 보일지 작성.

function App (){

  let [modal, setModal] = useState(false);
  return (
    저 state가 true면 <Modal></Modal>
    false면 아무것도 보여주지마세요
  )
}

- 삼항연산자(if문과 역할 비슷) 사용
1) JSX에서 조건문 쓰는 법
- jsx에서는 if 문법 대신 삼항연산자를 사용함

// 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드
3 > 1 ? console.log('맞음') : console.log('아님')

💁‍♀️ 글제목 누르면 모달창 띄우기

function App (){

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

- 글제목 클릭시 지금 state가 true면 setModal(false), false면 setModal(true)

 

✏️ JS map 함수

- JSX 중괄호 안에서는 for 반복문을 사용할 수 없고 대신 map()을 사용한다!
기능 1. array에 들어있는 자료 갯수만큼 그 안에 있는 코드 반복 실행

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

// 결과
console.log(1)
console.log(1)
console.log(1)

기능 2. 콜백 함수에 파라미터 아무렇게나 작명하면 그 파라미터는 배열 안에 있던 모든 자료를 하나씩 출력(소괄호 안에 있는 함수를 콜백함수라고 함)

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

// 결과
2, 3, 4

기능 3. return 오른쪽에 뭐 적으면 array로 담아준다. 그리고 map() 쓴 자리에 남겨 줌!

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

// 결과
[20, 30, 40]

 

✏️ JSX 안에서 HTM에 map 함수 적용

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

// 결과
<div>안녕</div>
<div>안녕</div>
<div>안녕</div>

- 우선 [1, 2, 3]에다가 map을 붙였으니 그 안의 자료 갯수만큼 map 내부에 있는 return <div>안녕</div> 실행.
- <div>안녕</div>를 array에 3번 담아줌.( [ <div>안녕</div>, <div>안녕</div>, <div>안녕</div> ] 이런 형태 )

✏️ 글제목 3개 반복문 축약

function App (){

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

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

- function(a, i): 첫째 파라미터 a는 array 안에 있던 자료, 둘째 파라미터는 i는 0부터 1씩 증가하는 정수
- <div className="list" key={i}>: map 반복문으로 반복생성한 html엔 key={i} 속성을 추가해 리액트가 <div>들을 각각 구분할 수 있게 해야한다. (없으면 워닝 띄워줌!)
- onClick() 내부 코드:
  - state가 array자료이므로 복사 먼저!
  - 0번째 좋아요 버튼을 클릭시엔 따봉[0] + 1, 1번째 좋아요 버튼 클릭시엔 따본[1] + 1, 2번째 좋아요 버튼 클릭시엔 따봉[2] + 1

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.