1. react-router-dom더보기이번 영상에서는 react-router-dom 사용법에 대해 배울거야 곧 알게 되겠지만, 아주, 아주, 엄청, 쉬울거야 알겠지? react-router-dom을 사용하기 위해서는 우선 몇가지를 import 해야 해 튜토리얼에서 요것들을 복사해서 여기에 붙여넣고 Link는 지워줘. 나중에 다룰거야, 알겠지? BrowserRouter를 import 해 올거야 라우터에는 두 가지 종류가 있는데 하나는 Hash Router고 다른 하나는 Browser Router야 우린 둘 다 살펴볼거니까 걱정하지 말고. 알겠지? 여기에 Router 컴포넌트를 만들어줄게 정말 간단하지 누군가 만들어 놓은 컴포넌트를 그냥 사용하기만 하면 되는 거야. 아주 쉽지 그 다음에는 Switch를 사..

1. To Do List (1)더보기이번 섹션에서는 할 수 있는 한 최대한 많이 연습을 하고 최대한 많은 것들을 만들어 볼거야 우린 State, Effect, props를 연습하면서 우리가 지금까지 배운 모든 것들을 한 번 적용해볼거야 자, 그럼 우선 아주 매우 엄청 간단한 to-do list를 만드는 걸로 시작해보자. 알겠지? 먼저 input을 만들거야 (위와 같이 작성) 아주 간단하지? 이제 한 번 더 연습해볼텐데 input 값을 어떻게 컨트롤 할 수 있을까? 우리가 가장 먼저 해야 하는 것은 useState()를 쓰는 거야 import 도 됐고 기본값으로는 빈 String 을 해줄 거야 그럼 이제 value 를 받아와야 하니까 toDo 랑 그걸 수정하는 함수를 setToDo라고 부를게 이 포지션을 ..

1. Problem더보기React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거야. 우리는 State얘기도 했고, props얘기도 했으니까 이제는 마지막 걸 배워볼 거야. 우리가 이번 섹션에서 배울 게 왜 필요한지 이해하기 위해서는, 먼저 문제를 하나 정의해보자. 좋아, 문제를 정의하기 위해서 ReactJS가 어떻게 작동했는지 상기시켜보자구 괜찮지? 저번에 했던 것처럼 counter를 만들어줄게. useState를 써줄거고. 그걸 react.js에서 import 하면 되지 보다시피 우리가 create react app을 사용하기 떄문에 여기다가 react라고 적어줄 필요는 없어. 우리가 react 점 뭐라고 쓰지 않고 그냥 useState만 import해줄 수 있어. 우린 useState가 반환값으로..

1. State Pracitce (2)const App = () => { const [amount, setAmount] = React.useState(); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const reset = () => setAmount(""); const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( ..

1. Understanding State더보기좋아 모두들, 이번 강의에서는 React.js의 state에 대해 배워볼 거야state는 기본적으로 데이터가 저장되는 곳이야우리가 지금 바닐라 JS로 진행중인 예제를 완성하려면우린 지금 counter를 증가시키고, 그걸 UI에 디스플레이하고 있잖아그걸 state로 만들 수 있어, counter 말이야바뀌는 데이터들 말이야지금부터 배워볼 부분이야어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄수 있을까지난 강의에서는 React Element를 생성하는 방법에 대해 배웠지그리고 나서 좀더 쉬운방법과 JSX에 대해 배웠지거의 HTML과 같지만 편리한 기능들 마저 가지고있는 녀석 말이야또 만약에 React Element를 함수 내에 담으면원하는 만큼 사용..

1. Our First React Element 더보기좋아, 여러분. 이번 강의에서는 React JS element를 어떻게 생성하는지 설명해줄거야 기억해, 우리의 목표는 여기 있는 코드를 React JS로 다시 구현하는거야 자, React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 거야 그렇게 안할거야 그 대신에, 우리는 Javascript 코드를 사용할 거야 span이든 버튼이든 무엇이든 만들기 위해서 말이지 HTML 코드를 직접 작성하지 않을거야 그 대신, Javascript와 React JS를 이용하여 element를 생성할거야 이건 정말 정말 유용한데 나중에 왜 그런지 알게 될거야 자 이번 비디오에서는, React JS로 element를 생성하는 어려운 방법을 먼저 보..