Written

useState 화면에서 + 버튼을 누르면 0부터 시작해서 15까지 증가하다가 다시 0으로 초기화되는 단순한 UI입니다. useState의 핵심은 상태 값이 변하면, 리렌더링이 일어나는 것 입니다. 그래서 화면에서 동적으로 변하는 컨텐츠를 useState를 사용하여 상태값으로 사용하는 것이죠. 먼저 useState를 import합니다. const [상태변수 , set상태변수] = useState(초기값) 의 형태로 상태변수를 생성할 수 있습니다. set상태변수는 함수입니다. 상태변수의 값을 바꿀 수 있는 함수입니다. 상태변수 = 임의의 값; => 이런 형태로 재할당은 불가능합니다. set상태변수의 함수를 사용하여 상태변수의 값을 변경할 수 있습니다! + 버튼을 클릭하면 onClick의 countPlus함..

Context API란 React로 웹 애플리케이션을 구현할 때, 보통 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 자신이 가지고 있는 상태 정보를 전달합니다. 그런데 자식 컴포넌트들은 또 그들만의 자식 컴포넌트가 존재 할 수 있기 때문에 트리의 뎁스가 깊어진 상태에서 특정 부모의 상태 값을 사용하려 한다면 중간에 있는 컴포넌트는 그 상태값이 필요없음에도 불구하고 계속해서 props를 통해 전달해야하는 효율적이지 못한 상태가 발생하게됩니다. 그래서 React에서 마치 그러한 상태값을 전역 변수처럼 만들어서 필요한 컴포넌트에서 가져다 쓸 수 있게끔 만들어 놓은 기능이 바로 Context API입니다. 현업에서 React를 통해 프로젝트를 진행할 때 보통 전역 상태 관리를 위해 사용하는 도구는 Red..

Props 만약 어떤 물건을 주문제작하려고 하는 상황을 가정해보겠습니다. 그렇다면 내가 원하는 특별한 스펙들이 존재할테고, 물건을 만들어 주는 업체에서는 그러한 스펙을 전달 받아야만 그에 맞게 물건을 주문제작을 해줄 수 있습니다. 위의 예시에서 스펙에 해당하는 것을 리액트의 Props라고 생각하면 좋습니다. 사용하고자 하는 곳에서 스펙을 Props로 전달하면 제작하는 곳에서는 Props에 담긴 정보들을 이용해 사용자가 원하는 결과물을 전달해주기 때문입니다. Welcome이라는 함수 컴포넌트가 h1태그를 만들어줍니다.(화면에 렌더링 해준다는 의미입니다) 그런데 주문제작을 해줍니다. 사용자가 주는 정보를 받아서 (props와 children) 무엇을 전달받느냐에 따라 다른 물건을 만들어줍니다. APP 함수안..