개발26 react의 useEffect는 딱 한번만 실행되며 dependency에서 변화되는 것을 지켜봄!! useState는 상태가 바뀔 때마다 매번 실행되지만, api 호출 같은 상황에서는 코드가 처음 한번만 실행되고 다시는 실행되지 않기를 바랄 수 있음. 이 때 useEffect를 사용함. useEffect(()=> { console.log("Call the API...")}, []) 이것이 없으면 항상 refresh state를 함! 또한 useEffect는 useEffect(() => { 실행되는 코드}, [dependency]) 로 구성됨 dependency는 실행되는 조건을 의미하며 변화되는 것을 '지켜보는 것'을 의미함. useEffect(() => { console.log("I run only once.")}, []) useEffect(() => { console.log("I run when '.. 2022. 9. 25. create-react-app CRA를 이용해 더 쉽게 react.js app을 만들 수 있음!! 개발 서버에 접근, 자동 새로 고침, CSS 포함 등이 사전 설정돼 있음 CRA 하기 전에 사전에 node -v 확인하고, npx 작동하는지 사전에 확인!! npx create-react-app 앱이름 해서 만들어준다. 개발환경이 훨씬 좋음! 2022. 9. 24. react의 props는 함수형 컴포넌트에 argument를 전달함!! 설정가능한 컴포넌트를 가져야 마크업이나 스타일을 재사용할 수 있음!! 버튼을 계속 만들고 안에 있는 글자만 바꾸고 싶다면 props를 통해 argument를 전달함. 렌더링하는 App에서 로 Button이라는 함수형 컴포넌트에 text, fontsize라는 props를 전달함. Button이라는 함수형 컴포넌트는 function Btn(props) 여도 되지만 function Btn({text, fontSize}){ 로 표시하고, 함수 내에서 props를 이용함. props에는 어떤 것이든 넣을 수 있음. props의 타입을 미리 지정해놓기 위해 propTypes를 이용함. 2022. 9. 24. react에서 입력값을 받고 싶은 경우!! react에서 입력폼에 값을 받고 싶은 경우 동일하게 태그를 만들어주고 value = {minutes} 로 UI에 값이 표시되게 해주고 onChange = {onChange} 라는 이벤트 리스너를 property로 추가한 다음 function App(){ const [minutes, setMinutes] = React.useState() const onChange = (event) => { setMinutes(event.target.value) } 2022. 9. 24. 이전 1 2 3 4 5 6 7 다음