박지연의 코딩이야기

앞서 동적인 UI를 만들기 위해서 render 함수에 ReactDOM.render(, root); 코드를 넣어주어서상태값이 바뀔때마다 render함수를 호출해주는 코드를 짰었다.  이전글 참고https://coogooo.tistory.com/39 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다" data-og-host="coogooo.tistory.com" data-og-source-url="https://coogooo.tistory.com/39" data-og-url="https://coogooo.tistory.com/39" data-og-image="https://scrap.kakaocdn.net/dn/wcPUn/hyX0yEsk4..

리액트(React)에서 State는컴포넌트의 동적인 데이터를 관리하는 데 사용되는 객체=> 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다. 1번째 리액트 UI컴포넌트를 만들어준다.    const Container = () => (      div>        h3>Total Clicks : {counter}h3>        button onClick={countUp}>CLick mebutton>      div>    );   1번째버튼을 누르면 숫자 상태가 변경되어야 하기에 let counter = 0; 초기값 '0'을 하나 선언해준다.       //2번째    let counter = 0;  2번째증가되는 함수를 만들어 ..

기존 리액트 렌더링방식은 React.createElement를 생성해서 root로 렌더링 해주는 방식이였다. 하지만 이 코드는 직관적이지 못하다.container에 넣기 위해서 하나하나 엘리먼트들을 체크해서 넣어야하기때문 더 직관적인 코드 문법이 존재한다.그것이 JSX (Javascript XML)  앞서 리액트 장점4번에서 봤듯이 JSX 사용함으로써 직관적인 코드 사용과 동적 렌더링이 가능해진다.4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 )=> Javascript 결합 코드로 이해하기 쉬움 얼마나 직관적인지 한번 차이를 느껴보자 기존 리액트엘리먼트 생성 코드는 아래와 같다. const btn = React.createElement( "button", ..

리액트(React)는페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다  장점1. 컴포넌트 기반 아키텍처 ( 재사용성 / 모듈화 ) => 속도 증가 및 유지보수 용이  2. 가상DOM (성능최적화 / 효율성 ) => 가상 DOM 에서 먼저 반영 후 변경된 부분만 실제 DOM에 업데이트 3. 단방향 데이터 흐름 (예측가능성 ) => 부모에서 자식으로 데이터 전달 / 상태 관리가 명확하여 버그줄이고 디버깅이 쉬움 4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 ) => Javascript 결합 코드로 이해하기 쉬움 5. 광범위한 커뮤니티 (광범위한 라이브러리) => 신속한 업데이트 및 방대한 자료를 통해 문제해결이 용이 6. Reac..