React

JS를 사용 할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selctor 함수를 사용해서 DOM을 선택합니다. 이럴때 리액트에서는 ref를 사용합니다. 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다. UseRef 1. DOM 접근 useRef는 React 애플리케이션에서 DOM 요소에 직접적으로 접근하기 위한 기능입니다. Refs를 사용하면 React 컴포넌트에서 DOM 요소에 접근하거나 조작할 수 있습니다. 주로 입력 필드의 포커스 설정, 애니메이션 트리거, 외부 라이브러리와의 통합 등의 경우에 활용됩니다. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 간단한 예제로 어떻게 사용하는..

데이터 바인딩이란 ? 데이터 바인딩 : UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스 입니다. 다르게 말하면 화면에 보여지는 데이터와(View) 와 브라우저 메모리에 있는 데이터(Model)을 묶어서(Binding) 서로 간의 데이터를 동기화 하는 것을 의미합니다. 양방향 바인딩이란 ? 리액트(React)에서 양방향 바인딩은 일반적으로 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 공유하는 방법을 나타냅니다. 이것은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하면서 동시에 자식 컴포넌트에서 부모 컴포넌트로 데이터를 업데이트할 수 있는 것을 의미합니다. 리액트는 일반적으로 단방향 데이터 바인딩을 합니다. 사용자의 입력에 따라 데이터를 갱신해야 하기 때문에, 단방향 데이터 바인딩으로 구성하면, 데..

public/ 폴더 이미지를 public/ 폴더에 저장하 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다. 이미지를 public/ 폴더에 저장하면 해당 이미지가 개발 서버 및 빌드 프로세스에서 공개적으로 제공됩니다. 이 폴더 내의 파일들은 브라우저에서 직접 참조할 수 있으며, 다른 파일에서도 요청할 수 있습니다. index.html과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있으며, 따라서 다른 파일에 의해 요청될 수도 있습니다. 예를 들어, localhost:3000/image.jpg를 불러오면 해당 이미지를 볼 수 있습니다. 이 방법의 장점은 이미지가 빌드 프로세스에 의해 처리되지 않고 직접 공개되기 때문에 일부 정적 파일이나 외부에서 직접 접근해야 하..