본문 바로가기
반응형

JavaScript49

07.input 상태 관리하기 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법 InputSample.js import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; App.js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현 input 의 onChange 라는 이벤트를 사용하고 이벤트에 등록하는 함수에서는 이벤트 객체.. 2021. 7. 20.
06.useState 를 통해 컴포넌트에서 바뀌는 값 관리 Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 이벤트 설정 Counter.js import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 .. 2021. 7. 20.
05.조건부 렌더링 조건부 렌더링 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미 App.js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; - 여기서 true 는 자바스크립트 값이기 때문에 중괄호 Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isSpecial ? * : null } 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' } export def.. 2021. 7. 20.
04.props 를 통해 컴포넌트에게 값 전달하기 props 의 기본 사용법 App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐? Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있음. props 는 객체 형태로 전달, 만약 name 값을 .. 2021. 7. 20.
반응형

티스토리툴바