반응형 개발이야기/React2 [React] 사진첩 게시판 저번에 작업했던 vue2_photo_board와 컴포넌트 구조, 스타일링, 변수, 함수를 최대한 동을하게 구성하여 해서 진행하였다. 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 통신과 랜더링 7. 전체소스 1. 환경 node v18.12.1 react v18 (useContext, react-query) 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ board.js : context방식의 api 인스턴스 ⌞ boardClient.js : axios로 직접적인 통신 ⌞ components ⌞ layout ⌞ImageLoading.jsx : 이미.. 2023. 1. 4. [React] 이벤트 핸들링 HTML과 비교 리액트가 만들어주는 가상DOM Element와 HTML DOM Element 에서 사용되는 이벤트 핸들러의 사용법을 비교해 보았다. 1. onClick 이벤트 HTML HTML onClick function htmlHandleClick() { console.log('You clicked onClick.'); } 일반적인 함수 호출형 방식 React React onClick function handleClick() { console.log('You clicked onClick.'); } 리액트에서는 onClick={ } 안에서 자바스크립트 함수를 동작시킬 수 있는데, 함수 선언 으로 함수의 이름으로 연결해 주는 방식을 사용한다. 만약 onClick={ handleClick() } 처럼 함수 호출식으로 사용.. 2022. 11. 10. 이전 1 다음 반응형
