React7 Props(Properties) Props란? 상위 컴포넌트에서 > 하위 컴포넌트로 (오직 단방향) 전달되는 데이터를 의미합니다. Props는 컴포넌트 간에 데이터를 주고받기 위한 가장 기본적인 방법중 하나입니다. 매개변수를 객체 디스트럭처링으로 받는 방법 {fruit: "사과"} {fruit} = {fruit : "사과"} {fruit} 매개변수를 props 변수로 받는 방법 {fruit: "사과"} props = {fruit: "사과"} {props.fruit} Props의 특징 props로 데이터 뿐만이 아닌 컴포넌트, 함수도 전달할 수 있습니다. 그래서 Props를 왜 사용하는데? Props를 적절히 사용할 경우 전달받은 데이터에 따라 화면에 표시하는 컴포넌트 본연의 역할만 수행하여 관심사를 분리할 수 있고, 데이터를 한 곳에서.. 2023. 12. 22. 컴포넌트(Component) 1. 컴포넌트란 UI를 구성하는 레고 블럭같은 구성요소(Component)라고 볼 수 있다. 2. 요소를 추출하는 일반적인 기준 1. 하나로 묶어서 관리하기 용이해 보이는 영역을 하나의 구성요소로 추출 or 그룹화 2. 공통적이거나 반복되는 요소를 하나의 구성요소로 추출 3. 컴포넌트의 이점 코드의 재사용성을 통한 중복 최소화 관리의 용이함 4. 컴포넌트 생성 1. JS 코드를 작성할 수 있는 HTML 파일 or JS 파일 생성 2. 내가 생각하는 의미있는 단위로 구성될 HTML Element, CSS, JS 코드 작성 3. 작성한 코드들을 하나의 컴포넌트로 그룹화시켜줄 컴포넌트 생성 문법 사용 4. 컴포넌트 사용(or 컴포넌트를 외부에서 사용할 수 있도록 export) 5. 컴포넌트 네이밍 규칙 1. .. 2023. 12. 22. JSX 문법 return문 <> </> 는 React의 Fragment 문법입니다. Fragment는 부모 요소가 없는 여러 개의 요소를 그룹화할 때 사용됩니다. React에서 컴포넌트는 하나의 최상위 요소만을 반환해야 하는데 예를들어 다음과 같이 여러 개의 요소를 반환하고 싶은 경우, div로 감싸면 하나의 부모 요소로 감싸진게 되는데, 부모 요소가 실제 DOM에 렌더링될 때 스타일링이나 레이아웃에 문제를 일으킬 수 있습니다. 이러한 상황에 Fragment를 사용하면 부모 요소를 추가로 생성하지 않고 여러 개의 요소를 그룹화할 수 있습니다. 2023. 12. 13. 이전 1 2 다음
