자라는 것을 잘하는 개발자 자라는 것을 잘하는 개발자

📝 성장을 위한 기록

• React 조건부 렌더링

  Study/React 2020. 1. 3. 18:26

  조건부 렌더링이란? 조건에 따라 다른 결과물을 렌더링하는 것을 의미한다. 보통 삼항연산자를 사용하여 조건부 렌더링을 진행한다. 특정 조건이 true이면 이것을 렌더링하고, false이면 저것을 렌더링할 수 있다. 만약 props 값 설정을 생략하고 prosp 이름만 적는다면, 디폴트값은 true이다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello({name, color, boolean}) { return ( 안녕하세요 {name} {boolean ? Hello..

  Read More

• React props : 컴포넌트에게 값 전달

  Study/React 2020. 1. 3. 10:51

  컴포넌트 props란? properties의 줄임말로서, 컴포넌트의 입력값이다. props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다. 그리고 props 는 state와 달리 read-only 라는 것에 주의해야한다. props 사용법 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; App 컴포넌트에서 Hello 컴포넌트를 불러와서 사용할 때, name과 color 값을 전달해주고자 한다. 첫 번째 방법: props 파라미터 활용 Hello.js import React from 'react'; function Hello(props)..

  Read More

• React 문법 : JSX (JavaScript XML)

  Study/React 2020. 1. 2. 10:04

  import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; return 뒤에 작성된 부분이 마치 HTML 처럼 생겼지만 이는 JSX 문법이라고 할 수 있다. JSX란? 자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면, Babel이 JSX 문법을 JavaScript로 변환해준다. 하지만, JSX가 제대로 자바스크립트로 변환이 되려면 지켜야하는 규칙들이 있다. JSX 규칙 1. 태그는 닫혀있어야 한다. import React from 'react'; import Hello from './Hello'; function App() { return ..

  Read More

• React Component 생성 및 사용

  Study/React 2020. 1. 1. 10:05

  React Component 리액트 컴포넌트는 html 요소들을 반환하는 것이라고 할 수 있다. 컴포넌트는 만들고 싶은 만큼 만들고, 각각 파일로 분리해서 관리한다. 하지만 React application은 한 번에 하나의 컴포넌트만 rendering 할 수 있다. 따라서 모든 것은 App.js에 모두 들어가야하고, 이 application 안에서 많은 컴포넌트를 넣고 import할 수 있다. 그리고 컴포넌트는 일종의 UI 조각이라고 할 수 있다. 따라서 쉽게 재사용이 가능하다. 컴포넌트 여러 곳에서 여러 번 불러와서 사용할 수도 있다는 것이다. React Component 생성 1. src 디렉토리에 Hello.js 파일 추가 2. import & 함수 또는 클래스 형태 & export 코드 작성 He..

  Read More

• React 개발 환경 세팅 & React 개발 서버 실행 & Github 연동

  Study/React 2019. 12. 31. 10:13

  React 개발 환경 준비 Node.jsWebpack 과 Babel 같은 도구들이 Node.js 를 기반으로 만들어졌다. 따라서 해당 도구들을 사용하기 위해서 Node.js 를 설치해야한다. Webpack, Babel의 용도? 리액트 프로젝트를 만들면 컴포넌트를 여러가지 파일로 분리해서 저장하고, 이 컴포넌트는 JSX 라는 문법으로 작성하게 된다. 분리된 여러 개의 파일을 한 개로 결합하기 위해서 Webpack 이라는 도구가 필요하고, JSX와 같은 새로운 자바스크립트 문법들을 사용하기 위해 Babel 이라는 도구가 필요하다. YarnYarn 은 조금 개선된 버전의 npm 이다. npm 은 Node.js를 설치하면 딸려오는 패키지 매니저 도구이고, 프로젝트에서 사용되는 라이브러리를 설치하고 라이브러리 버..

  Read More