React의 state와 props / <li>요소 / Semantic HTML의 필요성

React의 state와 props에 대해서 설명해주세요

 

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

 

state를 사용하는 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘어져 있다.

클래스 컴포넌트에서는 constructor메서드로 state를 초기화 한 후 state들을 지니면서 사용할 수 있다. 

더 자세하게는 super(props)과정에서 전달받은 props를 초기화 한후 this.state를 설정해두고 사용한다.

state는 컴포넌트 내부에서 선언되며, 객체 형태로 관리된다.

함수형 컴포넌트에서는 React에서는 state 값을 직접 수정할 수 없다. 그리하여 useState라는 Hook을 통해 state를 관리하는데,  state를 변경하면 컴포넌트가 다시 렌더링된다. 이러한 상태 데이터를 변경하여 컴포넌트의 동작을 제어할 수 있다.

(useState 훅은 배열을 반환하며, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 변경하는 함수이다. 이러한 상태 값과 상태 변경 함수를 사용하여 컴포넌트의 상태를 관리할 수 있다.)

 

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트(하위) 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.

props는 불리언을 포함한 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있다. 단, props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({})로 값을 감싸야 한다.

props를 받아 사용할때는 object 형태가 인자로 전달이 된다. 사용할때엔 props. 의 방식으로 꺼내 사용 할 수 있고 중괄호를 감싸는 형태로 사용한다.

function Component(props){
	return{
   	     <div>props.name</div>
             <div>props.age</div>
    }
}

 

 

 

<li>요소는 왜 <ul>요소의 자식 요소여야만 하나요?

 

li 요소는 목록 아이템을 보여주기 위한 요소이다.

그래서 목록을 담는 ul 요소의 자식 요소여야 한다.

화면 상으로는 아무런 문제가 없더라도 이렇게 li 요소와 ul 요소의 의미에 맞게, 시멘틱하게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다.

semantic한 태그의 사용의 중요성과도 관련이 깊다고 할 수 있다.

HTML spec에서도 li요소는 ol,ul,menu의 아래에서 사용할 수 있고, 다른 요소들과의 관계가 없다고 하면서 같이 사용하도록 권장하고 있다.

(https://html.spec.whatwg.org/#the-li-element)

 

 

Semantic HTML의 필요성을 예시를 들어 설명해주세요.

 

Semantic HTML은 적절한 의미의 태그를 사용하여 정보의 구조에 맞게 마크업하는 HTML 작성방법이라고 할 수 있다.

시멘틱 태그를 사용하게되면 프로젝트를 유지보수할때나 개발자들이 코드를 파악하기 쉬워진다는 장점이 있다.

또한 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 큰 도움이 된다.

예를 들어, 웹 사이트에 블로그 게시물이 있다고 가정해 보자.

블로그 게시물의 제목, 날짜, 본문 등은 모두 다른 의미를 가지고 있다. 이러한 정보를 의미 있는 HTML 요소로 표시하면 검색 엔진이 이해하기 쉽고, 스크린 리더 사용자도 콘텐츠를 더 잘 이해할 수 있다.

h1태그를 예로 들 수 있다.  h1는 페이지의 가장 중요한 제목을 나타내는 의미를 가진다.

블로그 게시물의 제목을 h1 요소로 표시하여 , 검색 엔진이 페이지 내에서 가장 중요한 내용을 파악하는 데 도움을 준다.

또한 본문은 article 요소로 감싸서 표시할 수 있다. 이렇게 하면 검색 엔진이 해당 영역을 본문으로 인식하며, 스크린 리더 사용자도 페이지의 본문을 쉽게 구분할 수 있다.

이와 같은 방식으로 의미 있는 HTML 요소를 사용하면 검색 엔진 최적화와 웹 접근성을 개선하며, 브라우저나 디바이스의 종류에 관계없이 일관된 사용자 경험을 제공할 수 있다.

 

검색엔진최적화(SEO)와 웹 접근성에 대해 더 자세히 알고싶어요.

 

검색 엔진 최적화 측면에서는, 시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 내용을 이해하기 쉽다.

예를 들어, header, nav, main, article, aside, footer 등의 시맨틱 태그를 사용하면 해당 영역이 어떤 내용을 담고 있는지 검색 엔진이 쉽게 파악할 수 있다.

이렇게 검색 엔진이 웹 페이지의 내용을 정확하게 파악하면, 검색 결과에서 해당 웹 페이지가 더 잘 노출될 가능성이 높다.

 

또한, 웹 접근성 측면에서는 시맨틱 태그를 사용하면 스크린 리더기와 같은 보조 기술을 사용하는 사용자들이 웹 페이지의 내용을 이해하기 쉬워진다. 시맨틱 태그를 사용하면 해당 영역이 어떤 내용을 담고 있는지 명확하게 구분할 수 있으므로, 사용자들이 원하는 정보를 빠르고 쉽게 찾을 수 있다.

또한, 시맨틱 태그를 사용하면 웹 페이지의 구조를 논리적으로 나타내므로, 보조 기술을 사용하는 사용자들이 웹 페이지를 보다 쉽게 이해할 수 있다.