Front-End5 [React 공부] 1-5. 컴포넌트에 Props 전달하기 Passing Props to a Component – React The library for web and native user interfaces react.dev React에서 컴포넌트끼리 정보를 주려면 Props (Properties)를 사용해야 된다 한 단계 위에 상위 컴포넌트 (부모 컴포넌트)는 하위 컴포넌트 (자식 컴포넌트에게) Props를 보낼수 있다 컴포넌트에게 Props 보내는 예시 아래 Avatar한테 Props를 보내기 위해선 두가지가 필요하다 export default function Profile() { return ( ); } 1. 내부에 정보를 작성하기 이런 방법으로 부모 컴포넌트에서 자식 컴포넌트에게 필요한 정보를 보내는 형식이 만들어진다 export default func.. 2024. 4. 15. [React 공부] 1-4. JSX안에 JavaScript 사용하는 방법 JavaScript in JSX with Curly Braces – React The library for web and native user interfaces react.dev [React 공부] 1-3. JSX로 마크업 작성하기 Writing Markup with JSX – React The library for web and native user interfaces react.dev JSX는 자바스크립트 환경에서 HTML이랑 비슷한 마크업을 작성하고 사용 가능하게 만들어주는 익스텐션이다 JSX: JavaScript에 마 zenu.tistory.com 1.3에서 JSX를 사용하는 방법을 배웠는데 때로는 JSX 내부에 JavaScript 로직을 바꿔야 되는 상황이 자주 온다 이런 상황에 대비해 JSX.. 2024. 4. 14. [React 공부] 1-3. JSX로 마크업 작성하기 Writing Markup with JSX – React The library for web and native user interfaces react.dev JSX는 자바스크립트 환경에서 HTML이랑 비슷한 마크업을 작성하고 사용 가능하게 만들어주는 익스텐션이다 JSX: JavaScript에 마크업 추가하기 수년간 웹에서는 HTML, CSS, JavaScript를 통해 개발해 왔다 HTML을 통해 구조, CSS를 통해 디자인, 그리고 로직을 위한 JavaScript는 주로 각각의 파일에 저장해 사용되는 경우가 대부분이었다 React는 컴포넌트 구조를 갖추고 있기 때문에 각 JavaScript 로직을 HTML 로직이랑 함께 구현해서 필요한 부분만 재사용하기 유용하게 JSX 형태로 만들어졌다 이를 통해 J.. 2024. 4. 13. [React 공부] 1-2. 컴포넌트 가져오기 & 보내기 Importing and Exporting Components – React The library for web and native user interfaces react.dev Component의 장점은 재사용 가능성 점점 복잡해 질수록 다른 파일로 나눠야되는 상황 생김 Root 컴포넌트 1.1에서 다뤘던 Gallery 그리고 Profile Function들이다 이는 현재 App.js라는 Root 컴포넌트에 배치되어 있다 나중에 Next.js 같은 프레임워크를 사용하게 되면 페이지 마다 Root 컴포넌트가 달라질 상황도 생긴다 function Profile() { return ( ); } export default function Gallery() { return ( 그냥 대충 아무 제목 ); } 컴포.. 2024. 4. 13. [React 공부] 1-1. 첫 컴포넌트 만들기 Your First Component – React The library for web and native user interfaces react.dev 컴포넌트란? Web에서 HTML은 태그를 통해 더 다양한 구조를 제공해준다 // 독립적인 컨텐츠를 위해 사용 My First Component // 제목 // Ordered List 사용 Components: UI Building Blocks // 리스트 element Defining a Component Using a Component 이런 마크업을 통해 CSS 스타일링과 더해져 웹에 있는 모든 내용을 볼 수 있게 된다 리액트는 이런 마크업, CSS, 자바스크립트를 합쳐서 Component를 구사하는데, 이는 재사용 가능한 UI 및 모든 정보를 새로고.. 2024. 4. 11. 이전 1 다음 반응형
