리액트 기초 공부

안녕하세요 홍가 입니다.

오늘은 리액트 기초에 대해서 설명을 해드리려고 해요.

 

리액트는 자바스크립트의 라이브러리 중 하나이며 사용자 인터페이스를 만들기 위하여 만들어졌다.

리액트는 왜 라이브러리인가요?

 

프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있음. 일정한 형태를 가지고 다양한 형태의 결과물을 만든다.

 

라이브러리 : 소프트웨어를 개발할 때 공통으로 사용될 수 있는 특정한 기능들을 모듈화를 한 것이다.

 

둘의 차이점은 제어의 흐름의 권한 차이이다.

 

리액트를 생성할 때는 저는 VSCode를 사용하고 있습니다.

npx create react app 파일명

터미널 부분에 이 명령어를 작성하시면 파일이 생성이 되고

생성된 파일을 실행시켜려면 

npm start

작성하시면 됩니다.

컴포넌트에 대해 알려드리려고 해요.

컴포넌트는 항상 대문자로 시작을 해야 하고 소문자로 시작하는 컴포넌트는 DOM으로 인식을 하기 때문에 꼭 대문자로.

UI를 재사용 가능한 개별적인 여러 조각으로 나누어주고 조각을 개별적으로 나누어 코딩이 가능해집니다.

 

글 리스트를 컴포넌트를 활용하여 다음과 같은 화면을 만들 수 있습니다.

 

컴포넌트를 작성 방법인데 3가지 다 사용할 수 있습니다.

저는 1번과 2번을 주로 사용하고 있습니다.

 

다음에는 props, style부분에 대해 작성하겠습니다.