[78/100] 240802

React

 

DOM이란?

 

문서를 객체로 만든 문서 객체 모델(Document Object Model)의 약자이다.

트리구조를 가지고 있다. 돔트리, 노드 접근과 제어를 한다.

문서객체모델은 html, xml 문서의 프로그래밍 인터페이스로 구조화된 표현을 제공하고 프로그래밍 언어가 dom구조에 접근할 수 있는 방법을 제공하여 그들이 문서구조, 스타일, 내용등을 변경할 수 있게 돕는다. dom은 구조화된 nodes와 property와 method를 갖고있는 objects로 문서를 표현한다.

 

document객체의 자식 노드들을 검사해서 트리를 타고 내려갈 수있다.

 

물론 document 앞에 window객체가 생략되어있다. 실제로는 window.document.~~이런식으로 실행된다.

 

실제로 window객체의 명령어인 window.open이나 window.close()를 window없이 입력해도 실행되는걸 확인했다.

 

 

 

form관련--

 

리액트에서 form은 html이나 jsp에서의 form과 기능적으로 유사하지만 사용방식이나 제어방식에서 차이가 있다.

 

html이나 jsp에서는 주로 서버사이드 렌더링과 함께 사용 되었는데 form제출시 전체 페이지가 리프레시되고 서버에 요청이 전송되었지만 리액트에서는 클라이언트 사이드 렌더링을 사용하며 form의 데이터 처리를 주로 자바스크립트를 통해 비동기적으로 수행한다.

 

리액트에서는 form을 처리할 때 제어된 컴포넌트와 비 제어된 컴포넌트 두가지 방법을 사용 가능하다.

 

제어된 컴포넌트로는 form의 데이터가 컴포넌트의 state에 의해 제어되는 방식으로 input 필드의 값이 변경될 때 마다 이벤트 핸들러를 통해 state를 업데이트한다.

 

장점 : 데이터 출처가 명확하며 모든 form 데이터가 컴포넌트의 state에 의해 저장되므로 데이터를 쉽게 검증 및 조작이 가능하고 한곳에서 데이터를 관리할 수 있기 때문에 복잡한 form의 상태를 추적하고 디버깅하기가 쉽다.

단점 : 모든 입력 변경마다 state를 업데이트해야 하므로, 특히 큰 form에서는 많은 코드와 이벤트 핸들러가 필요할 수 있다.

 

제어되지 않은 컴포넌트는 리액트에서 dom 요소에 직접 접근하여 값을 제어하는 방식으로 'ref'를 사용하여 form 요소에 접근한다. form요소의 값을 state에 저장하지 않고 필요할 때만 dom에서 값을 가져오는 방식이다.

 

장점 : form 데이터가 컴포넌트의 state와 동기화되지 않으므로, 데이터의 출처가 불명확해질 수 있고 여러 입력 필드를 가진 복잡한 form에서는 관리가 어렵다.

 

결론 : 입력받을 form데이터가 많을경우 제어된 컴포넌트 state를 사용하여 제어하는 방식이 더 유리하다.

 

-----라우터---------

 

리액트의 라우터란?

여러 페이지를 쉽게 탐색할 수 있도록 도와주는 라이브러리로 url경로에 따라 다른 컴포넌트를 렌더링하는 기능을 제공하며 네비게이션을 관리하기 위해 여러 컴포넌트와 훅을 제공한다.

 

1.BrowserRouter

html5의 history api를 사용하여 ui를 업데이트하고 이는 전체 애플리케이션을 감싸는 최상위 컴포넌트.

 

2.Routes와 Route

Routes는 라우팅 규칙을 정의하는데 사용

Route는 특정 경로에 대해 렌더링할 컴포넌트 정의

 

3. Link

Link는 애플리케이션 내에서 페이지간의 네비게이션을 가능하게 하는 컴포넌트로 <a> 태그와 유사하게 작동하지만 페이지를 새로고침 하지 않고 url만 변경한다.

 

4. useNavigate

useNavigate 훅은 프로그래밍 방식으로 네비에기션을 수행할 수 있게 해주는 훅이다.