728x90 Front-End/React23 [React] 10. 조건부 렌더링 출처: React 공식 홈페이지 State 끌어올리기 – React (reactjs.org) 1. 데이터 변경사항을 주위 컴포넌트에 전파해야할 때 > 상위 컴포넌트로 state를 끌어 올리면 편리하다. > 주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기를 만들어 볼 것이다. 2. Calcultor 컴포넌트를 만든다. function BoilingVerdict(props){ if(props.celsius >= 100){ return The water would boil. } return The water would not boil. } class Calculator extends React.Component{ constructor(props){ super(props); this.handleChang.. 2021. 2. 3. [React] 9. 폼 출처: React 공식 홈페이지 폼 – React (reactjs.org) 1. 제어 컴포넌트 > 사용자의 입력을 기반으로 자신의 state 변수와 연동해 관리하고 업데이트한다. > 아래는 input을 입력할 때마다 onChange 의 handleChange 함수에 의해 state가 변하고 value값을 업데이트해서 다시 렌더링한다. 예시) class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } ha.. 2021. 2. 3. [React] 8. 리스트와 Key 출처: React 공식 홈페이지 리스트와 Key – React (reactjs.org) 1. 여러개의 컴포넌트 렌더링하기 > map()함수를 이용 const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems}, document.getElementById('root') ); 2. 기본 리스트 컴포넌트 > key={number.toString()} 이 없으면 key 누락 warning이 뜬다. function NumberList(props){ const numbers = props.numbers; const listItems = numbers.map((number) => .. 2021. 2. 3. [React] 7. 조건부 렌더링 출처: React 공식 홈페이지 조건부 렌더링 – React (reactjs.org) 1. if문을 통한 분기 function UserGreeting(props){ return Welcome Back!; } function GuestGreeting(props){ return Please sign up.; } function Greeting(props){ const isLoggedIn = props.isLoggedIn; if (isLoggedIn){ return ; } return ; } ReactDOM.render( , document.getElementById('root') ); 2. State가 있는 버튼을 누르면 문구가 변하는 화면. State + if 활용. 대충보고 스킵하세용~ class Log.. 2021. 2. 1. 이전 1 2 3 4 5 6 다음 728x90