본문 바로가기

IT TIPS/React.js

[React.js] props에 대해 알아보자! 리액트 데이터 흐름 매커니즘 컴포넌트를 조합할 때 기본이 되는 props(속성)에 대해 알아보겠습니다! 리액트에서는 컴포넌트의 조합과 재사용을 위해 props를 제공합니다 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매커니즘이라고 할 수 있죠 props는 자식 컴포넌트 안에서 변경할 수 없고 부모 컴포넌트가 전달하며 소유하는 것입니다 예시를 보도록 하죠! 12345678910111213141516171819202122232425262728import React, { Component } from 'react'; //부모 컴포넌트class Parent extends Component { render() { return ( ) }} //자식 컴포넌트class Child extends Component { render() { re..
[React.js] 리액트 시작하기! 새로운 리액트 프로젝트 만드는 법 첫 리액트 프로젝트를 시작해 봅시다! 제 개발 환경은 다음과 같습니다 ^ㅡ^ OS : macOS SierraEditor : Visual Studio Code macOS, Windows, Linux 어떤 OS 건 상관없이 터미널창을 통해 프로젝트를 간단하게 시작할 수 있습니다! 에디터의 경우엔 각자 취향 ㅎ_ㅎ(개인적으로 VS Code 적극 추천..) 1단계 npm install -g create-react-app 글로벌로 맨 처음에 한번만 설치 해주면 됩니다 2단계 프로젝트 저장을 원하는 디렉토리로 cd 해준다음! create-react-app my-app 여기서 my-app에는 원하는 프로젝트 명을 넣어주시면 됩니다~~ 3단계 리액트 프로젝트 생성이 완료되었습니다!! cd my-app 프로젝트 폴더로 ..
[React.js] 리액트란? 프론트 엔드의 대세!! 페이스북 오픈소스 라이브러리 리액트에 관심을 가지고 꾸준히 공부하고 있는 초보 개발자 염염2 입니다 ^ㅡ^ 앞으로 제가 공부하면서 얻은 꿀팁들을 포스팅하며 공유할 예정인데요 오늘은 리액트가 무엇인지 한번 알아보려 합니다!! 구글, 애플, 아마존, IBM 등을 더불어 IT 기술의 선두에 있는 페이스북에서 만든 기술이란건.. 아시죠!? 보통 MVC 모델이란 말을 많이 쓰죠?? 간단하게 리액트는 V! 바로 View에 초점이 맞춰진 기술입니다 리액트는 UI를 구축하기 위한 라이브러리로서 UI를 한 번만 정의하고 사용할 수 있게 해줍니다 이후 앱의 상태가 변경되면 별도의 조치 없이도 UI가 이에 반응해 자동으로 다시 재구성된답니다 ㅎ_ㅎ 리액트에서는 관리하기 쉬운 작은 컴포넌트로 크고 강력한 앱을 구축합니다!! 더 이상 함수 본체의 절반을 ..