React
-
React Component setStateReact 2022. 11. 19. 21:26
의도와 다른 동작 incrementCount() { // 주의: 이 코드는 예상대로 동작하지 *않을 것*입니다. this.setState({count: this.state.count + 1}); } handleSomething() { // `this.state.count`가 0에서 시작한다고 해봅시다. this.incrementCount(); this.incrementCount(); this.incrementCount(); // React가 컴포넌트를 리렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다. // 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데 // React는 컴포넌트가 리렌더링될 때까지 `th..
-
React props 합성 (Composition) ExReact 2022. 11. 19. 20:28
예제 코드 export function Func1Main(props: any) { return ( Welcome Message~ ); } function Childs1(props: any) { return ( Childs1 {props.children} {props.children[0]} ); } function Childs2(props: any) { return ( Childs2 {props.component1} {props.component2} ); } 명시적인 매개변수명 props.component1, props.component2에 값을 넣어서 전달하면 그것을 받은 component는 props.component1, props.component2를 각각 필요에 따라서 명시적으로 불러와 사용할 수 ..
-
React props.children ExReact 2022. 11. 19. 20:05
React props.children 함수나 클래스를 Tag형태로 사용할 때 자식에 추가 Tag를 넣어서 전달하고, 부모는 자식들을 모두 또는 선택적으로 render할 수 있다. export function Func1Main(props: any) { return ( Welcome Thank you for visiting our spacecraft! ); } function Func1(props: any) { return ( Func1Main {props.children} {props.children[0]} ); }
-
React Element 변수 ExReact 2022. 11. 19. 10:29
html element형식으로 전달한 값을 함수에서 인자로 받아서 처리하는 예제 function UserFunc(props) { return Welcome back~!; } function GuestFunc(props) { return Welcome guests to visit.; } function Greeting(props) { const isOn = props.isOn1; if (isOn) { return ; } return ; } const root = ReactDOM.createRoot(document.getElementById('root')); // Try changing to isLoggedIn={true}: root.render(); render호출에서 html element형식으로 사용한..
-
생명주기 메서드 componentDidMount componentWillUnmountReact 2022. 11. 19. 07:05
타이머 자원에 등록해서 주기적으로 호출되는 클래스를 만드는 예제 componentDidMount호출 속에서 타이머 등록하고 componentWillUnmount호출 속에서 타이머 반환한다. class Counter1 extends React.Component { constructor(props) { super(props); this.state = {cnt: 0}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ cnt: this.state.cnt+1 }); } ren..
-
React setState와 renderReact 2022. 11. 19. 06:57
일반적 사용 this.state.xxx에 값을 넣어 setState함수를 호출해 관리하면 redner가 자동 실행되도록 해야한다. render호출 예약 확인용 예제 예제 코드 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } cnt = 0; tick() { this.cnt++; this.setState({ //date: new..