React

[React] react 다시3(+아이콘 넣기)

쿨키드 2022. 9. 20. 23:11
react 다시3
+아이콘 넣기

 

구조분해할당
서버프로그램 php, jsp 등
 
이벤트커런트타겟은 이벤트를 걸어준 자신
이벤트타겟는 실제로 누러주는 것 ( input에서 값을 받아올 때 사용 多)
 
🟣 html을 jsx로 뿌려주는 걸 해봄 
const DATA = [ 
  { id: 1, name: 'ㅇㅅㅇ', age: 31, sleep: true }, 
  { id: 2, name: 'ㅇㅁㅇ', age: 31, sleep: true }, 
  { id: 3, name: 'ㅇㅂㅇ', age: 31, sleep: true }
  ☝it과 el이 지칭하는 한 줄 한 줄
]

const List = () => { 
  return ( 
    <> 
      {DATA[0].sleep} 
    </> 
  ) 
}

const List = () => {
  return (
    <>
      {DATA[0].id} 
<></> 안에서는 중괄호를 써야 자바스크트로 쓸 수 있음
{}객체로 불러오고, 키값(id)를 씀
    </>
  )
}​

 

리액트에서 for문을 잘 안 돌림.
👀 리액트에서는 순회하는 방법으로 map,  foreach를 주로 사용함.
-> map, filer 중요
여러개 나오는 게 하는 쉬운 방법
하지만, 많은 갯수를 해야하는 경우 귀찮음.. 
const List = () => {
  return (
    <ul>
      <li> {DATA[0].name}</li>
      <li> {DATA[1].name}</li>
      <li> {DATA[2].name}</li>
    </ul>
  )
}​

 

여러개 나오는 게 하는 쉬운 방법_map을 써서

const List = () => { 
  return ( 
    <ul>

      {DATA.map(it 또는 el => <li>{it.name}</li>)} 
     
    </ul > 
  ) 
}




👉 화살표 함수.ver
const List = () => { 
  return ( 
    <ul> 
      {DATA.map(it => { return <li>{it.name}</li> })} 
    </ul > 
  ) 
}​

결과물

const List = () => {
  return (
    <ul>   
      { 
        DATA.map( 
          (it, idx) => 
            <li key={it.id}> idx값 대신에 id값을 사용 
              {idx + 1}번 {it.name}은 {it.age}살 {it.sleep ? '자고 있음' : '놀고 있음'} 
            </li>) 
      }
☝와 같음👇
       {DATA[0].name}은 {DATA[0].age}살 {DATA[0].sleep && '자고 있음'},
      {DATA[1].name}은 {DATA[1].age}살 {DATA[1].sleep && '자고 있음'},
      {DATA[2].name}은 {DATA[2].age}살 {DATA[2].sleep && '자고 있음'}, */}
      {/* DATA 0의 name */}
      {/* {DATA[0].sleep && '자고 있음'} = sleep이 true면, 자고있음을 나오게 한다 
      {DATA.map(it => { return <li>{it.name}</li> })}
    </ul >
  )
}
에러가 떠서 key를 추가함.
 
리액트는 O(N)의 시간복잡도로 두 트리를 비교하기 위해 key 속성을 사용하고, 자식 요소들을 반복적으로 렌더링하는 상황에서 명시적으로 key를 사용한다.
즉, 트리를 비교할 때 key 값을 비교하고 key가 달라지면 렌더링도 다시하게 된다. 또한 key 값을 통해 추가되는 데이터 및 요소의 위치를 잡아주기도 한다.
 
.slice(0, 2).reverse()
reverse : 매소드 체인지
useEffect : 한 번만 렌더링이 될 수 있게 함
스크롤이벤트, 셋타임아웃 등

 

const App = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(json => setData(json)) 👉 외부에 있는 데이터를 가지고 와서 사용할 때, fetch를 사용
  }, [])
  return (
    <>
      {console.log(data)}
    </>
  )
}
export default App;

 

 

👀 tab menu는 배열로 해서 번호를 가질 수 있게 짜야함

<ul>
   <li>menu01</li>
   <li>menu02</li>
   <li>menu03</li>
</ul>​
import { useState } from "react"; 
const TabData = [ 
    { id: 1, title: "menu01", content: "content01" }, 
    { id: 2, title: "menu02", content: "content02" }, 
    { id: 3, title: "menu03", content: "content03" } 
] 
const Tab = () => { 
    const [num, setNum] = useState(0) 
    return ( 
        <> 
            <ul> 
                { 
                    TabData.map((el, idx) => ( 
                        <li key={el.id} 
                            onClick={() => setNum(idx)} 
                            className={num == idx ? 'on' : ''} 👉on 붙이는 법 
                        > 
                            {el.title} 
                        </li> 
                    )) 
                } 
            </ul> 
            <div className="content"> 
                {TabData[num].content} 
            </div> 
        </> 
    ) 
} 
export default Tab;

 

 

📌 리액트에 아이콘 넣는 법

터미널에 ☝ 를 복붙한다.
사용하고자 하는 아이콘을 선택해서, import에 붙여넣는다.

import { BsFillCloudLightningFill } from "react-icons/bs" 
👉 {  } 중괄호 안에는 내가 사용하려고 하는 실질적인 아이콘의 이름?을 복사해서 붙여 넣는다.
<span onClick={() => {
                setToggle(!toggle)
            }} className={toggle ? 'btn on' : 'btn'}>
                <BsFillCloudLightningFill />
  </span>
👉 마자막으로 쓰려고 하는 부분에 </>에 넣어준다.