전체 글36 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. react.js는 바뀌는 부분만 업데이트한다는 점이 최고의 장점!! 데이터의 값이 업데이트되어야 하는 상황에서 값을 바꿀 때마다 다시 렌더링하는 방법이 있음 function render(){ reactDom.render(, react)) } 여러가지 요소를 리렌더링하려고 해도 react.js는 UI에서 바뀌는 부분만 업데이트해줌. 기존과 다른 부분만 파악함. 이것이 매우 좋은 점임! html에서는 상위개념까지 업데이트함... 2022. 9. 24. 이전 1 ··· 5 6 7 8 9 다음