html #css #javascript #React #코린이2 [React] 4 input 상태 관리하기 리액트에서 input 태그의 상태를 관리하는 방법 인풋태그를 넣어서 사용할 컴포넌트를 하나 만들어준다 InputSample.js import React from 'react' function InputSample(){ return( 초기화 값: ) } export default InputSample InputSample컴포넌트를 App.js에서 렌더링해준다 import InputSample from './components/InputSample'; function App() { return ( ); } export default App; 그럼이렇게 화면이 나오게된다. 인풋에 입력하는 값이 아래의 값: 옆에 나오게하고 초기화 버튼을 누르면 인풋태그의 값이 지워지게 해줄것이다. useState를 사용하여상태.. 2023. 1. 8. [React]3 조건부렌더링,useState 조건부 렌더링이란 특정조건에따 다른결과물을 렌더링해주는것이다. App.js 에서Hello 컴포넌트를 사용할때 Props로 isSpecial={true}를 전송해준다 true는 자바스크립트의 불린이기 때문에 중괄호로 감싸줘야한다. function App() { return ( ); } function Hello({color,name,isSpecial}){ return( {isSpecial ? *: null} 안녕하세요 {name} ) } Hello.defaultProps = { name:"이름없음", } Props로 isSpecial을 받아서 삼항연산자로 true이면 * false이면 null을 출력한다. JSX에서 Null,undefined,false를 렌더링하면 아무것도 나타나지않는다. function.. 2023. 1. 7. 이전 1 다음
