반응형 React7 [React Document] Component와 Props 이 포스팅은 React Document 주요개념 Component와 Props 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. UI를 재사용 가능한 개별적인 여러 조각으로 나눈것을 컴포넌트라고 합니다. 개념적으로 보자면 컴포넌트는 Javascript의 함수와 유사하다. props라는 임의의 입력을 받아 React Element를 반환합니다. 컴포넌트의 시작은 대문자로 시작한다. 컴포넌트는 최대한 쪼개 별도의 컴포넌트로 만드는게 좋다. 💡 함수 컴포넌트와 클래스 컴포넌트 React에서 컴포넌트를 만드는 방식에는 함수로 작성하는방식과 , ES6의 Class를 사용하여 컴포넌트를 작성하는 2가지 방식이 있습니다. // 함수형 컴포넌트 function Profile(props) .. 2021. 1. 22. [React Document] 엘리먼트 렌더링 이 포스팅은 React Document 주요개념 엘리먼트 렌더링 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. 🔧 Element Rendering Element는 React에서의 가장 작은 단위를 의미합니다. Element는 사용자 화면에 표시하기 위한 내용을 기술한다. 앞에 내용에 있던 코드가 위의 내용과 같습니다. const name = Hello YundleYundle 💡 DOM에 Elemenet Rendering 하기 나중에 해당 예제가 무엇을 의미하는지 알수있겠지만 지금은 모른다는 가정하에 보겠습니다 HTML의 DOM 어딘가에 id가 root 인 div가 있다고 가정하겠습니다. React App에는 기본적으로 모든 Element를 React DOM에서 관리하기 .. 2021. 1. 22. [React Document] JSX 소개 이 포스팅은 React Document 주요개념 JSX소개 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. // 이러한 Javascript 변수를 본적이 있나요? const element = Hello React!! React를 시작하기전에는 위와 같은 코드를 Vanillajs 에서 본적이 없었습니다. 위의 문법은 문자열도 아니고, HTML도 아닙니다. [F12]를 누르고 console창에 위의 코드를 입력한다면 다음과 같이 SyntaxError가 발생합니다. 왜냐하면 Vanillajs에서는 변수에 요소를 넣을수 없기 때문입니다. 이러한 문법을 React에서 사용하기 위해 React에서 지원하는 문법을 바로 JSX라고 합니다. 그렇다면 어떻게 JSX를 사용할 수 있는지 알.. 2021. 1. 22. 이전 1 2 다음 반응형
