그 땐 Front했지 (46) 썸네일형 리스트형 [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 7. State Practice part Two 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 분단위 시단위 둘 다 convert하는 기능 만들기 👉🏻전체 코드 filp 버튼 만들기 Flip 👉🏻reset 버튼 아래에 flip 버튼을 만들어준다. const [flipped, setFlipped] = React.useState(false); 👉🏻useState를 통해 boolean으로 flipped state와 setFlipped를 만들어준다. const onFlip = () => { reset(); setFlipped((current) => !current); }; 👉🏻onFlip 함수를 만들어준다. reset 함수를 실행하고 flipped.. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 6. State Practice part One 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. minutes를 입력하면 hourse단위로 계산해서 출력해주자! 👉🏻먼저 전체 코드이다! 하나씩 살펴보자 분단위를 시단위로 바꿔주기 Hours value에 minutes state를 60으로 나눈 값을 넣어준다. ✍🏻Math. round: 소숫점을 반올림해준다. reset 버튼을 만들어준다. Reset 클릭하면 reset 함수를 호출하는 리셋버튼을 만들어준다. const reset = () => setMinutes(0); setMinutes를 통해 minutes state를 0으로 초기화한다. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 5. Inputs and State 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 입력하는 minutes값 업데이트 하기 분(minutes)을 입력하면 시(hours)단위로 바꿔주는 기능을 만들어보자! 👉🏻onChange: input에 변화가 생기면 할당해준 행위를 실행한다. Minutes input tag를 만들어준다. onChange에 onChange함수를 호출한다. onChange함수에서 setMinutes를 이용해 입력한 수를 minutes state의 값으로 갱신한다. h4 tag에서 갱신된 minutes를 출력한다. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 4. State Functions 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 함수로 counter 값 변경하기 👉🏻setCounter에 현재 state를 기반으로 다음 state를 계산하고 싶다면 함수를 전달하는 것이 더 안전한 방법이다. 이후 업데이트 등의 상황이 와도 혼돈이 덜 생긴다. setCounter함수에 새로운 함수를 전달해준다. counter를 current라는 값으로 받아 1을 더해 반환해준다. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 2. setState part Two 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. useState의 함수를 이용해보자! 👉🏻useState를 호출하면 반환되는 함수의 이름은 통념상 'set + 변수 이름'으로 짓는다. 이 함수는 인자로 준 값으로 state값을 변경하고 리렌더링해준다. onClick함수를 만들어서 setCounter를 호출한다. setCounter에 인자로 counter에 1을 더한 숫자를 넣어준다. onClick함수를 button tag에 넣어준다. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 1. setState part One 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. State 값을 설정해보자! useState render 함수를 만들지 말고 변경된 counter의 값이 업데이트되도록 해보자. 👉🏻useState라는 함수는 주어진 인자와 함수 하나를 리스트로 반환한다. 주어진 인자가 없다면 undefined를 반환한다. counter와 modifier에 useState가 반환하는 리스트의 각 요소를 할당해주었다. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 0. Understanding State 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 클릭하면 카운터가 올라가는 기능 만들기 counter를 1씩 올려주는 함수 counterUp을 만든다. 어플리케이션을 render해주는 render 함수를 만든다. 버튼을 클릭하면 counterUp을 실행하고 그 때마다 render 함수도 호출해서 변경된 counter 값을 적용시킨다. 💡리액트와 바닐라 자바스크립트의 차이 바닐라 자바스크립트: counter가 포함된 span과 body가 업데이트 된다. 리액트: counter인 숫자만 업데이트 된다. [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 6. JSX part Two 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 컴포넌트를 다른 컴포넌트에 넣기 👉🏻컴포넌트는 대문자로 만들어야 한다. 소문자로 이름을 지으면 HTML코드와 헷갈리기 때문이다. 먼저 이전에 만들었던 Title, Button 변수들을 함수 형태로 만들어준다. Container의 div에 Title, Button 컴포넌트를 포함해주고 render한다. 이전 1 2 3 4 5 6 다음
