리액트 네이티브 컴포넌트 리액트 네이티브에서 컴포넌트는 UI를 구성하는 기본 단위입니다. 웹의 React와 마찬가지로, 재사용 가능한 UI 조각을 만들 수 있습니다. 기본 제공 컴포넌트와 사용자 정의 컴포넌트로 나뉩니다. 주요 리액트 네이티브 컴포넌트: 역할과 주요 속성 1. View 역할: 레이아웃을 구성하는 가장 기본적인 컨테이너(웹의 div와 유사) 주요 속성 style: 스타일 지정 (배경색, 정렬 등) children: 내부에 다른 컴포넌트 포함 가능 2. Text 역할: 텍스트를 화면에 표시하는 컴포넌트 주요 속성 style: 텍스트 스타일 지정 (색상, 크기 등) numberOfLines: 표시할 최대 줄 수 ellipsizeMode: 텍스트가 넘칠 때 처리 방식 (‘head’, ‘middle’, ‘tail’, ‘clip’) 3. Image 역할: 이미지를 화면에 표시하는 컴포넌트 주요 속성 source: 이미지 경로(로컬 또는 uri) style: 이미지 크기, 모양…

Redux란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적을 관리가 가능하고 Props 없이 다른 컴포넌트에게도 상태를 전달할 수 있다. 하지만 단순히 전역 상태 관리만 하는 프로젝트라면 Context API로 충분하다고 한다. Redux 개념(1) - Action(액션) Redux에서 “액션(action)” 은 상태(state)를 어떻게 바꿔야 하는지를 설명하는 “객체” 다. 말 그대로, “이런 일이 일어났다”고 리덕스에 알리는 역할을 한다. 액션은 무조건 객체이며, 필수로 type 속성을 가져야 한다. Redux 개념(2) - Action Creator(액션 생성 함수) 액션 생성 함수(Action Creator) 는 액션 객체를 반환하는 함수입니다. 왜 액션 생성 함수를 쓸까? 코드 일관성 유지 - 액션 객체를 직접 만들지 않고, 공통된 방식으로 생성 가능 자동화/ 테스트 용…

MUI란? Material-UI (mui)는 웹 애플리케이션을 빌드하기 위한 리액트 기반의 UI 프레임워크이다. Google이 2014년 안드로이드 스마트폰에 적용하면서 알려졌으며, Material Design을 기반으로하였기에 시각적으로 훌륭하고 사용하기 쉽다. 때문에 개발자들도 스타일리쉬한 쉬운 사용자 인터페이스를 개발을 손쉽게 할 수 있다. 이러한 Material-UI는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 일관된 디자인 요소를 구축하도록 한다. 특징 1. CSS-in-JS 다른 UI 라이브러리들과 마찬가지로, js에서 css를 관리하는 방식으로 스타일링한다. 이는 컴포넌트별로 스타일을 정의하고 적용하는데 유용하다. 2. 컴포넌트 기반 mui는 다양한 UI 요소를 컴포넌트 형태로 제공하며, 이러한 컴포넌트를 조합하여 원하는 인터페이스를 구성할 수 있다. 3. 반응형 디자인 mui 컴포넌트는 다양한 화면 크기와 장치에 맞게 반응한다. 모바일 기기부터 데스크톱까지 일…

Create React App Create React App은 단일 페이지의 React 앱을 만들 위한 방법입니다. 프로젝트 생성을 위한 조건 프로젝트를 생성하기 위해서는 Node.js가 설치되어 있어야 한다. 버전은 각 os에 맞는 recommand 버전을 다운 받으면 된다. 터미널을 열고 아래와 같이 명령어를 입력해 설치된 Node.js의 버전을 확인한다. 프로젝트 생성 과정 터미널을 열고 아래 명령어를 입력 하면 react-test라는 폴더가 생성된다. 아래 명령어를 입력해 vscode에서 폴더 열기 vscode에서 터미널을 열어 아래 명령어를 입력하면 localhost 3000; 이라는 내 컴퓨터의 포트 번호 3000번 서버에서 리액트 앱이 실행된다. 프로젝트 진행 프로젝트를 진행하기 전에 src폴더에는 App.js와 index.js를 제외한 나머지 파일들을 삭제하고 시작한다. App.js useEffect useEffect 함수는 리액트 컴포넌트 렌더링 될때마다 특정 작…

Props란? 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 보내주는 방법 객체이다. 어떤 prop들을 받는지 검사하게끔 도와주는 역할을 한다. Btn 컴포넌트 함수 props는 객체이기 때문에 { }열어 원하는 속성을 바로 받을 수 있음 { }를 사용하지 않게 되면 props.text, props.fontSize의 방식으로 값에 접근해야한다. text prop은 string 형태의 데이터, fontSize는 number 형태의 데이터가 아닐시 동작은 되지만 콘솔 창에 올바른 형태의 데이터가 아니라고 경고를 알려준다. App 컴포넌트 함수 어떠한 것들을 컴포넌트 안에 넣든간에 HTML안에 영향을 주지 않고 prop이 된다. 컴포넌트 함수에 해당 prop을 등록하고 작성해야만 한다. 전달된 prop들은 하나의 오브젝트로 받게된다. prop을 전달할때의 이름과 받아서 사용할때의 이름은 동일해야한다. props와 stata의 차이점 props: 함수의 매개변수처럼 컴포넌트에 전달된다. …

MinutesToHours 컴포넌트 함수 배열 비구조화 할당 amount는 React.useState(0)을 사용해 초기값을 0으로 설정, flipped는 React.useState(false) 초기값을 false로 설정 하게된다. setAmount, setFliped 함수는 amount와 flipped의 값을 업데이트 할때 사용된다. setFliped(counter + 1)로 로직을 만들 경우 counter는 state를 할당한 값만 참조한다. 즉, setFliped를 여러번 호출하게 되면 값이 항상 2가 된다. 하지만 setFliped((current) => !current)로 로직을 만들 경우 current에는 useStete의 state자체를 참조한다. 여러번 함수를 호출하게 되면 값을 업데이트해서 반영한다. React에서는 Jsx문법을 Javascript로 변환하기 때문에 따로 Javascript를 쓰기 위해서는 {}를 사용해 주어야 한다. App 컴포넌트 함수 Minut…

React Js란? React JS는 기본적으로 Facebook에서 구축하고 유지 관리하는 JavaScript 라이브러리입니다. 또한 웹 애플리케이션의 간단하고 빠르며 확장 가능한 프런트엔드를 구축하기 위한 효율적이고 선언적이며 유연한 오픈 소스 JavaScript 라이브러리입니다. Jxs란? JavaScript에 XML을 추가하여 확장한 문법이다. React Js 필요한 스크립트 태크 React Js를 설치하기 위한 JavaScript 코드 Jsx 문법을 브라우저가 이해할 수 있는 형태로 변환하기 위해 필요하다 컴포넌트 작성 함수형 컴포넌트 선언 렌더링 Container에 Title과 Button을 포함시키기 위해서는 function으로 만들어주어야 함 선언한 컴포넌트를 불러오기 위해서는 형태로 작성해주면 된다. 작성한 jsx를 화면에 렌더링하기 위한 함수 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와야 사용가능하다. 는 Jsx로 작성된 컴포넌트를…