React study/React JS로 영화 웹 서비스 만들기33 [React] 3-6. Input과 State를 이용하여 단위 변환 앱 만들어보기 (2) 📌 단위 변환 앱 만들어 보기 전 시간에 이어서! 4. 사용자가 Minutes 입력란에 값을 입력할 때 Hours 입력란에 입력되는 값도 같이 바뀌게 하기 다음과 같이 코드를 입력하면 된다. function App() { // 1 const [minutes, setMinutes] = React.useState(0); // 2 const onChange = (event) => { setMinutes(event.target.value); }; return ( Super Converter Minutes Hours // 5 ); } 1. minutes가 곧 state에 해당하였고, 기본값은 0으로 설정하였다. setMinutes는 minutes를 제어하는 함수이다. 2. Minutes 입력란에 변화가 생길 때마.. 2023. 5. 31. [React] 3-5. Input과 State를 이용하여 단위 변환 앱 만들어보기 (1) 📌 단위 변환 앱 만들어 보기 * 코드 초기화 시간을 분 단위로 바꾸기 1. 사용자 입력 input 만들기 - Html 방식 function App() { return ( Super Converter Minutes Hours ); } * input tag에 id를 부여하고 label tag에 'for=id명'의 형식으로 for 속성을 작성해 주면 해당 label과 input이 연결된다. (label을 클릭하면 그에 맞는 input이 클릭되는 효과가 나타나게 된다.) - jsx 방식 jsx는 javascript 문법과 HTML을 혼재하여 쓰기 때문에 위처럼 HTML tag 속성으로 for과 class를 쓰는 것은 좋지 않은 코드이다. for은 javascript 문법에서 선점하고 있기 때문이다. 따라서 아.. 2023. 5. 31. [React] 3-4. State를 바꾸고 싶으면? 📌 State를 바꾸는 방법들 state를 바꾸는 방법 counter 예제에서 state를 바꾸는 방법 2가지는 이미 앞에서 배웠다. 1. setCounter() 함수의 인자로 고정값 넣어주기 (숫자, 문자열 모두 가능) 2. 아래처럼 현재 count 값을 변형한 식을 setCounter() 함수의 인자로 넣어주기 . . . . . function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter + 1); }; . . . . . 우리가 지난 시간에 썼던 코드이다. but counter는 다른 곳에서도 update될 수 있기 때문에 위 코드는 별로 좋은 코드는 아니다. 즉, 이.. 2023. 5. 31. [React] 3-3. State 복습 State 복습! modifier 함수를 사용해 컴포넌트의 state(app의 데이터)를 바꿀 때 컴포넌트는 재생성되어 새로운 값을 가지고 리렌더링된다. 다음 코드를 통해 확인해 보자. . . . . . function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter + 1); }; console.log("rendered"); // 주목! console.log(counter); // 주목! . . . . . - "rendered"는 처음 브라우저가 로드될 때와 버튼 클릭 시 console 창에 나타난다. - counter는 페이지가 처음 로드되었을 때는 0으로 console .. 2023. 5. 31. 이전 1 ··· 3 4 5 6 7 8 9 다음
