이번에는 한번 실행 된 것이 다시 렌더링 되지 않도록 설정하는 것을 배워보도록 하겠다. React에서 제공하는 useEffect function을 사용해보자. useEffect는 두개의 argument를 가지는 function인데 첫번째 argument는 한번만 실행하고 싶은 코드이다. 우선 계속 실행될 명령어를 다음과 같이 작성해 놓고 useEffect를 사용해보자. useEffect에는 component가 처음 render할때 실행되고, 다시 실행되지 않을 function을 넣어줄것이다. useEffect의 두번째 argument에는 빈 array를 하나 주자 그럼 다음과 실행되는 것을 확인할 수 있다. 조금더 단순화해서 익명의 function을 만들어보자. 그럼 다음과 같이 나타나게 된다. 그래서 ..

useState를 사용하여 카운터를 한번 만들어보자. import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((pre) => pre + 1); return ( {counter} Click me ); } export default App; 그럼 정상적으로 counter가 작동하는 것을 확인할 수 있을 것이다. console을 통해 render되는 것을 체크하면, 처음과 버튼을 클릭할때 매번 rendering되는 것을 확인할 수 있다. 근데 버튼이 클릭될 때마다, console.log가 출력될 때도 좋지만 출력되지 않기를 원할 때가 있기도 하다...

먼저 Button을 한번 만들어보자. 그러고 App.js에 아래와같이 import로 Button을 가지고 오면콘솔창에 아래와 같이 경고창이 뜨는데, 이것이 create-react-app의 우리를 도와주는 기능 중 하나라고 생각하면 된다. 이것은 import로 Button을 불러왔지만, Button을 사용하지 않았기에 발생한 경고이다. 그럼은 Button을 사용해보자. 다음과 같이 t만 쳐도 어떤 prop을 가지고 오는지 알려주는데 이또한 장점 중 하나이다! Button에 마우스만 올려도 어떤 prop을 가져와야하는지 잘 알려준다. App.js import Button from "./Button"; function App() { return ( Welcome back! ); } export default ..

이번에는 CDN이 아닌, Create React App을 사용하여 React JS 어플리케이션을 훨씬 쉽게 만들어보자! https://reactjs-kr.firebaseapp.com/docs/installation.html 설치 - React A JavaScript library for building user interfaces reactjs-kr.firebaseapp.com Create React App의 장점 1. 많은 스크립트 2. 많은 사전 설정 3. 개발서버 접근 4. 자동 새로고침 5. 기본 Application안에 CSS포함 6. Publish해주는 명령어도 있어 훨씬 편함! 먼저 Node.js를 설치 하면 된다~! 그리고 이제 App을 만들어보자! 먼저 아래의 명령어로 App을 만들어보자..

1. Prop 불러오기 다음 둘은 똑같은 의미라는 것은 기억하자!! 근데 주의!!!!!!! 컴포넌트에서 prop 이름!! prop을 전달할때의 이름, 받아서 사용할때의 이름은 동일해야한다. 근데 사람들은 props이렇게 해서 안쓴다!!!! 그냥 전자를 더 많이 쓰니 다시 이 상태로 돌아오자! (이것이 짧기 때문) 그래서 우리는 prop으로 string, number, function...etc 어떤것도 보낼 수 있다. 2. Prop Types사용하기(검사) 우리는 아래의 prop types를 설치하여 다음과 같이 어떤 type의 prop을 받는지 검사하도록 할 수 있다. 그리고 isRequired를 통해 필수적으로 받을것과 아닌것도 구별할 수 있음을 배웠다.

자 이번에는 너무 많은 Props를 가지다가 실수를 저질렀을 때를 한번 살펴보자. Btn에 한가지 더 configuration(설장)을 해보자. user가 prop으로 fontSize를 전달할 수 있도록 해보자. 근데 여기서 prop을 string을 보내야하는데 number를 전송한 경우! 아니면 그 반대의 경우! 그러면 error는 나지 않지만 문제는 React가 이 문제를 알아차리지 못한다는 것이다. 근데 이를 해결해주는 툴이 있는데 PropTypes라는 패키지가 있다. PropTypes는 어떤 타입의 prop을 받고 있는지를 체크해준다! https://unpkg.com/prop-types@15.7.2/prop-types.js 그래서 아래의 코드를 추가해주면 된다. Btn.propTypes = { t..