Leo.K | To become a cooler Developer

2023-05-30 #2.4 Layout Stream /** * 스크롤 불가 (브라우저가 아니기 때문이다.) * 모든 View가 기본적으로 flex Container다 * react native에서 flex Direction의 기본 값은 column이다. * 높이와 너비에 기반해서 디자인 하지 않는다. * 다양한 스크린에서 동일하게 작동하도록 반응형의 레이아웃을 사용해야 한다. * flex 값을 사용해서 특정 아이콘 및 컨텐츠가 화면에서 차지하는 비율을 지정할 수 있다. * 부모 컨테이너에 지정된 flex 값이 자식 컨테이너의 비율 기준이 된다. * * Layout with Flexbox * * 컴포넌트는 flexbox 알고리즘을 사용하여 자식의 레이아웃을 지정할 수 있습니다. * Flexbox는 다양한..

2023-05-11 #6.0 EFFECTS state가 변경되어 렌더링 될 때마다 함수를 실행하는 것이 아니라, 가장 처음 컴포넌트가 렌더링 될 때만 함수를 실행하고, state의 변화로 인한 리렌더에는 실행되지 않도록 하기 우리의 코드가 초기에 단 한번만 실행되도록 보호해준다. useEffect(function, deps) function : 단 한번만 실행할 함수. deps : 내 코드의 특정 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법 deps[] 배열 안에 들어 있는 값이 변화하는 경우에만 function을 실행하도록 할 수 있다. 더보기 import {useState, useEffect} from "react"; function App() { const [counter, setV..

React Native는 단 하나의 구조가 아니라 여러가지 인프라와 그 인프라를 연결지어 주는 bridge역할을 하나로 묶은 시스템이다. 안드로이드라면 java와 sdk(software developement kit) ios라면 xcode와 시뮬레이터를 다운 받아서 인프라를 컴파일하여 앱으로 만들어야 한다. 위의 모든 과정을 하기 위해선 설치부터 어려움이 있는데 이번 강좌에서는 자바스크립트를 제외한 모든 인프라가 컴파일 되어 있는 앱(배포용 x, 테스트용 어플)을 다운받고, 자바스크립트 코드만을 해당 앱으로 보면서 어떻게 사용되는지 테스트 할 것이다. 윈도우 사용자라면 커맨드 창을 열어서 아래의 명령어로 패키지를 다운로드 받아준다. 이때 node.js 버전은 14 이상이어야 한다. npm install ..

2023.5.9 #4.0 Props 더보기 Props : 부모 컴포넌트가 자식 컴포넌트에게 유용한 데이터를 전달하는 일종의 방식! 자바의 인터페이스 처럼 공통된 속성을 하나만 만들어서 자식 컴포넌트에게 전달하는 것과 유사한 방식인 것 같다. 함수의 인자처럼 컴포넌트에서 전달할 수 있고, 인자는 단 한개만 존재하며, 해당 인자는 Object의 형식이다. 2023.5.10 #4.1 Memo Props에는 text나 boolean값 이외에도 function을 보낼 수 있다. 이는 JSX 문법으로 html 태그 자체에 이벤트 리스너를 넣는 것과는 전혀 다르게 단지 Props의 이름이기 때문에 필요한 위치에 개발자가 직접 꺼내서 배치해야 한다. 부모 컴포넌트의 상태(state)값이 변경되면 부모 컴포넌트에 속해있..

2023-03-24 #3 State state : 기본적으로 데이터를 저장하는 저장소. 바뀔 변수의 값을 저장해 줄 저장소. 이번 강의에서는 바뀐 값을 저장해줄 state 변수에 대해서 알아보았다. 0. 문제점 Container라는 컴포넌트를 만들면서 내부의 버튼에 이벤트를 등록해주고 count를 증가시키는 것은 어렵지 않다. 하지만 문제점은 가장 초기의 상태(counter == 0)를 렌더링 해주고, 그 이후에는 렌더링을 하지 않기 때문에 내부적으로 클릭이벤트가 발생할 때마다 counter의 값은 1씩 증가하는데, 그 값이 보이지 않는다는 점이다. 단순하게 클릭 이벤트가 발생하여 값이 증가할때마다 reRendering하여 값을 갱신해주는 방법이 있다. 1. vanilla JS VS react JS 여기..

2023.03.22 #2.0 Introduction ReactJS는 웹 페이지를 Interactive하게 만들어 준다. 바닐라 JS와 ReactJS를 직접 코드로 비교하면서 살펴보자. #2.1 Before React 바닐라 JS로 버튼을 클릭하면 클릭한 카운트가 증가되도록 아주 간단한 기능을 구현해보자. 1. html 작성 2. 자바스크립트로 가져오기 3. 이벤트 리스너 등록 4. 데이터 없데이트 5. 업데이트 html 위와 같은 순서로 진행하면 아래와 같은 소스코드와 결과를 확인할 수 있다. Total clicks : 0 Click me 같은 기능을 ReactJS로 구현한 뒤에 장점을 파악해보고자 할 건데, 그 전에 React를 사용하기 위한 js파일을 import해야 한다. 아래의 두 링크를 impo..