Modern React with Redux (English)

[ 강의들으며 기초부터 다시 다지기 🦵🦵 ]

리액트를 처음 시작할때,
src 폴더 내에 index.js 파일에서 React와 ReactDOM 두가지를 가장 먼저 import 한다.

React : Library that defines what a component is and how multiple components work together

ReactDOM : Library that knows how to get a component to show up in the browser

Destructuring

props와 구조분해할당의 이해

function ProfileCard(props) {
  // const title = props.title;
  // const handle = props.handle;
  const {title, handle} = props ;
  return (
    <>
      <div> Title is {title} </div>
      <div> Handle is {handle} </div>
    </>
  )
}

위의↑ 코드를 아래와↓ 같이 간단하게 표현할 수 있다.

function ProfileCard({title, handle}) {
 // const {title, handle} = props ;
 return (
   <>
     <div> Title is {title} </div>
     <div> Handle is {handle} </div>
   </>
 )
}

UseState()의 원리

function makeArray() {
  return [1, 2, 4, 10]
}
// const myArray = makeArray()
// const firstElement = myArray[0]
// const secondElement = myArray[1]
const [firstElement, secondElement] = makeArray
console.log(firstElement, secondElement)

✏️ useState()의 쓰임

const [count, setCount] = useState(0)