리액트

React

[React] Event

Event Header Component에서 onChangeMode props의 값으로 function를 전달한다. Header를 클릭했을떄 함수를 실행하고 싶을때 사용한다. 앵커태그에 onClick 이벤트를 걸어주면 앵커태그를 클릭했을때 function을 호출한다. 그리고 앵커태그를 클릭했을때 페이지 이동을 막을려면 onClick에 콜백함수로 들어간 함수가 호출될때 event 객체를 첫번째 파라미터로 주입해준다. event.preventDefault();로 앵커태그의 기본 동작을 방지한다. 그다음 props로 보내준 onChangeMode를 호출한다. Nav Component를 클릭했을때 id 1, 2, 3 별로 1, 2, 3이라는 alert을 띄우고 싶으면 Nav Component는 onChangeM..

React

[React] React를 사용하는 이유

React Library Single Page Application ex>Naver Vibe, Flipkart, Instagram을 확인해보면 페이지 전환이 새로고침없이 부드럽게 동작한다. 이런 사이트들을 SPA라고 하는데 SPA의 장점은 HTML 파일을 1개만 사용한며 다른 페이지를 보여주고 싶을때 HTML만 교체해주면 되기 떄문에 동작이 부드럽다. JavaScript로도 가능하지만 코드가 너무 길어지기 때문에 React라는 JavaScript Library를 설치하여 더 간편하게 만들수있어 React Library를 사용한다. 또는 HTML을 함수, Array, Object 같은 곳에서 보관하여 재사용할수있어 큰 프로젝트일수록 관리가 편해진다. 그리고 JSX(JavaScript + xml)도 지원하며..

Potato Ongsim
'리액트' 태그의 글 목록