Components
React는 Components, Props, State 이 세가지 개념이 핵심이라고 한다.
Components는 일종의 레고블록 느낌으로 필요할때 붙혔다 떼도 다른 어플리케이션에 영향을 주지 않고 유지관리가 가능하다.
동시에 Components는 함수이다. 그래서 내용을 함수 안에 담아서 표현할 수 있고, 그렇게 하면 코드의 재사용이 가능해져서 생산성이 올라간다.
규칙 1. React의 Components는 대문자로 시작한다.(HTML, JavaScript와 구별)
규칙 2. 일반 HTML 태그를 사용하는 것과 같은 방식으로 꺾쇠 괄호를 사용한다 <>
보통 애플리케이션은 단일구성 보다 많은 콘텐츠를 포함한다. 그래서 중첩된 구성요소를 표현도 가능하다 HomePage가 최상위 구성요소를 가지고 하위에 여러 구성요소들을 가진 트리구조는 그림과 같고
이 코드는 HomePage(최상위 컴포넌트)를 root.render에 전달하여 렌더링을 하는 구조이다.
HomePage 컴포넌트는 Header 컴포넌트를 반환하게 되어있고 Header 컴포넌트는 Develop. Preview. Ship을 반환하게 되어있기 때문에 기존과 같은 화면이 렌더링된다.
Props
props는 부모가 자식에게 데이터를 전달하는 매개체이다. Props를 사용하려면 JSX에서 중괄호를 추가하면 된다
여러 방식으로 표현이 가능한데 파이썬 print문과 비슷해보인다. props 객체를 만들어서 여러곳에 활용하는 느낌.. 그렇게 되면 내용을 바꾸고 싶을때 props 객체 내용만 바꾸면 되니까 더 편할것 같긴 하다
목록으로 내용을 표시하는것도 가능하다. 그냥 데이터를 직접 하드코딩하는게 아니라 변수객체에 담아서 전달된다는 내용을 길게 풀어쓴것 같다.
State
리액트가 이벤트 핸들러와 state가 상호작용하는 방법
- 버튼을 만들고 버튼에 이벤트핸들러를 붙힌다.
- 사용자가 버튼을 누르면 이벤트핸들러가 활성화되고 상호작용이 가능하다
리액트라는 hooks라는 함수가 제공되는데 이 함수를 사용하면 상태에 따른 여러 로직을 추가할 수 있다
좋아요를 눌렀을때 숫자가 올라가는 등.. 변수를 설정할때는 설명적인 이름을 하는걸 추천한다고 한다.
결론
React에서 중요한건 Componts, Props, State인데 Components는 함수이자 객체 블록이고(레고) Props는 마찬가지로 객체 인스턴스 같은 느낌인데 변수처럼 쓰인다. State는 사용자와의 상호작용으로 트리거된다.
Q. Props와 State의 차이점
A. Props는 컴포넌트에 전달되는 읽기 전용 정보, State는 시간이 지남에 따라 변경될 수 있는 정보로, 일반적으로 사용자 상호작용에 의해 트리거됨.
