본문 바로가기

나야, 리액트 스터디

(42)
[week 1] 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기) 안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기)를 읽고 정리한 내용에 대한 아티클을 작성해보겠습니다.🌐컴포넌트란?컴포넌트는 리액트 앱을 구성하는 기본 단위로, 재사용 가능한 UI 조각을 말한다. 이 컴포넌트들은 각각 자체적인 렌더링 로직과 상태 관리를 가지며, 복잡한 UI를 구성하기 위해 서로 조합하고 재사용할 수 있습니다. 다음 사진과 같이 컴포넌트들를 조합하여 화면을 구성할 수 있다. 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 킥이..
[week 1]- function Component ? class Component? 안녕하세요! YB 이윤지라고 합니다.리액트 첫 스터디인 만큼 무엇에 관한 주제로 아티클과 발표를 다뤄볼까 고민도 많이 했는데요!역시 리액트하면 떠오르는 건 컴포넌트 재사용성! 이 가장 많이들 떠오르실 거라고 생각합니다. ㅎㅎ아닌...아닌가? 그렇다고 해주세요. React Component 는 개념적으로는 JS 함수랑 비슷합니다.함수가 입력을 받아 출력을 return 하는 것처럼 React Component도 입력을 받아서 정해진 출력을 리턴하기 때문이죠.하지만 일반적인 JS 함수와는 조금 다른데요, JS의 입력과 출력이 말 그대로 '입력' 과 '출력' 이라면React Component 에서의 입력은 React Element 가 됩니다.바로 이렇게!   React Component 는 말 그대로,만들고자 ..