업무에서 첨부파일 업로드 솔루션을 적용하는 도중 드래그앤드롭을 구현하게 됐다.라이브러리를 써야할 정도로 다양한 기능이 필요한 것은 아니여서 html5에서 제공하는 드래그앤드롭 API를 사용했다. 아주 간단하게 기능만 동작하는 코드를 가져왔다. State 및 상태 관리const [files, setFiles] = useState([]);useEffect(() => { console.log(files);}, [files]);files가 변경될 때마다 로깅한다. 드래그 앤 드롭 이벤트 핸들링// 드래그 중일 때 이벤트 발생const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation();};// 파일을 드래그 영역 위에 떨어트렸을 ..
리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다. 1편: https://youngdev57.tistory.com/102 React 기초 그리고 입문리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다. 리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있 다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)youngdev57.tistory.com React Hooks리액트 훅이란 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 하는 메소드이다.(위의 useState(), useRef()도 리액트 훅이다.)훅들의 특징은 use 라는 접두사가 붙는다. (예를 들어 useEffect(), useReducer() 등)조건문과 반복문 내부에서..
리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다. 리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있 다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)란 말 그대로 화면을 이루는 "구성 요소"를 뜻한다. 아래에 자세한 설명을 포함한다.프로젝트의 사이즈가 점점 커지고 페이지가 많아질수록 코드를 수정하기 어려워지는데이렇게 중복되는 코드들을 컴포넌트화하여 제거하면 유지보수 차원에 용이하다는 이점이 있다. 2. 화면 업데이트에 대한 구현이 쉽다.화면 업데이트란 쉽게 말해 사용자의 행동에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것이다.리액트는 과정을 생략하고 목적만 간결히 명시하는 방법인 선언형 프로그래밍 방식으로 동작하고,자바스크립트는 목적을 이루기..
