728x90 Front-End39 [React] 12. React로 사고하기(마지막) 출처: React 공식 홈페이지 React로 사고하기 – React (reactjs.org) 1. 상품을 검색하는 데이터 테이블을 만드는 과정에서 React에 걸맞는 생각의 흐름을 알아보자 > 공식문서를 보는것이 좋다. 아래는 요약만 해두었다. 2. UI를 컴포넌트 계층 구조로 나누기 > UI를 컴포넌트로 쪼갠다. > 단일 책임의 원칙 하나의 컴포넌트는 한가지 일을 한다. 3. 정적인 버전 만들기 > state없이 props를 받기만하고 UI 렌더링이 되도록 만든다. > 작은 UI 컴포넌트는 하향식으로 컴포넌트를 만들고 > 큰 UI 컴포넌트는 상향식으로 컴포넌트를 만드는 편이다. 4. state를 찾아내기 (1) 부모로부터 전달되는 props - state가 아니다 (2) 시간이 지나도 변하지 않는다 -.. 2021. 2. 3. [React] 11. 합성 vs 상속 출처: React 공식 홈페이지 합성 (Composition) vs 상속 (Inheritance) – React (reactjs.org) 1. 합성을 사용 > React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다. 2. 컴포넌트에서 다른 컴포넌트를 담기 (1) 상위 컴포넌트의 어떠한 자식 태그들이 올지 모르는 경우 > props.children을 이용해서 상위컴포넌트의 자식들을 그대로 출력한다. 예시) function FancyBorder(props) { return ( {props.children} ); } function WelcomeDialog() { return ( Welcome Thank you for visiting our spa.. 2021. 2. 3. [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. 이전 1 2 3 4 5 6 7 ··· 10 다음 728x90