본문 바로가기

내마음대로만들어보자/React58

[복습]React 주요 개념 정리 - Component, state, props 1. Component란? 컴포넌트는 블록이라고 이해하면 쉽다. 웹사이트를 하나를 만들더라도 조각내서 보면 여러 블록들로 이루어져 있으며, 일반적인 웹사이트의 경우에는 header , container , footer 등등으로 이루어져있고 또 그안에 content , bannerimage 등등으로 또 이루어져있다. 2. state , props state는 Component가 가지고 있는 데이터다. state는 한 컴포넌트에서만 사용되는 데이터로써 주로 넣어놓고 생성, 수정하는 데이터라고 보면된다 (생성 , 수정도 한 컴포넌트에서만 이루어지기때문에 자유롭게 생성,수정이 가능하다.) props는 Component가 부모 Component로 부터 받아온 데이터다. 예를들어, 위와같은 구조로 되어있다고 하면 .. 2021. 9. 22.
[복습]React 주요 개념 정리 - JSX JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜줌으로써 화면을 그려주기때문에 중요하게 알고 넘어 갈 필요가 있다! 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 작업을 편하게 할 수 있게 하기위해 나온것이다. 1. JSX 규칙 - 태그는 꼭 닫아주어야 한다. - return 아래에 무조건 1개의 엘리먼트를 반환하기 - JSX에서 자바스크립트 값을 가져오려면 중괄호를 사용한다. (값 뿐만아니라 map , 삼항연산자 등 자바스크립트 문법을 JSX안에 쓸때에도 중괄호를 사용한다.) - class 대신 className 으로 사용한다. - style은 인라인으로 주기 orange → 중괄호를 두번주는 이유는 딕셔너리도 자바스크립트이기때문에 중괄호안에 사용해야하므로 두번 작성하도록 되.. 2021. 9. 20.
[복습]React 주요 개념 정리 - React프로젝트 만들기 - 첫 React 프로젝트를 만들기위한 폴더부터 생성해주자. macintosh HD 아래 사용자 폴더안에 만들어주자 필수 패키지에 대해서 설치해두었던 NVM에 대해서 간단히 알아두면, Node.js의 버전 관리자인데 수많은 버전을 마음대로 골라서 설치할 수 있도록 도와준다! 이걸 직접 관리하기란 쉽지 않기때문이다. - OS 내 터미널에서 NVM을 설치해줬기때문에 VS CODE에서 정상적으로 설치가 되어있는지 버전을 확인해보면된다. nvm --version - 이제 nvm 으로 노드를 설치하자. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식문서.. 2021. 9. 19.
[복습]React 주요 개념 정리 - JavaScript React를 처음 접하고 공부하면서 어떤 기능을 하고 어떻게 사용해야되는지 이해는되지만 전반적으로 어떤상황에서 사용을 해야되고 응용이 좀 잘 안되는 것 같아 다시한번 복습하면서 정리를 하려고 한다. 향후 내가 웹 사이트를 만들려고 할때 정리한 내용을 보면 나한테 지금 필요한 부분은 무엇인지 순서 상 어떻게 놓치고 있진않은지 쉽게 파악하고 진행할 수 있는 자료가 되었으면 한다! 1. 필수 프로그램 설치 - Github : 궁금한 내용을 찾아보다보면 수많은 사람들이 여기에 소스코드를 공유하고 있는걸 알 수 있다. 지금보다 코드를 해석하는 능력이 더 생긴다면 활용도가 너무나도 높다! - Visual Studio Code : 리액트네이티브 코드를 작성할 프로그램 - NVM : 여러가지 버전의 노드를 관리 할 수.. 2021. 9. 19.

티스토리툴바