개발/react21 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. react.useState()는 데이터를 업데이트하는데 이용함!! 데이터가 바뀔 때마다 render() 함수를 호출하는 것은 귀찮음 counter 값을 증가시킬 때마다 리렌더링 초기 컴포넌트가 초기 데이터로 렌더링, 버튼을 클릭하면 리렌더링하려면 useState()를 사용한다. const data = react.useState(); console.log(data) 하면 [undefined, f]가 표시된다. undefined와 function을 주는데 undefined가 초기 값이고, function이 상태 지정 함수이다. 구조분해 할당을 통해 const [counter, setCounter ] = React.useState(0)로 표시한다. 클릭하면 버튼이 업데이트되도록 버튼에 이벤트 리스너를 추가한후 Click me 함수를 만들어주는데, 위에서 상태지정함수인 set.. 2022. 9. 24. 이전 1 2 3 4 5 6 다음