전체 글167 React-Native 특징 코어 컴포넌트 : 화면에 렌더링 하는 (, ..) API: 하드웨어 운영체제가 제공하는 기능 (platform, Alert) 속성: 프로그래밍 용어에서는 클래스의 멤버 변수를 의미한다. 컴포넌트도 화면 UI를 담당하는 클래스이므로 속성을 가진다. - 가변 mutable : 수시로 값이 바뀜 - 불변 immutable: 바뀌지 않음 따라서 리액트 네이티브는 값이 바뀌면 즉시 재렌더링을 해야한다. 즉 리액트 네이티브가 말하는 속성은 = 클래스속성 + 재렌더링 이다. JSX 속성 설정 // string 타입 속성값 지정 // number 타입 속성값 지정 // 객체 일때 // 부모 데이터를 자식에게 전달시 const person = {name:'ych', age: 22} export default functi.. 2021. 9. 8. null 병합 연산자 (Nullish Coalescing Operator) 사용자가 사용하는 값들이' ', 0인경우 false아닌 입력이 되도록 하는 방법 { const name = 'ych'; const userName = name || 'Guest'; console.log(userName); } { const name = null; const userName = name || 'Guest'; console.log(userName); } // 안좋은 방법 // || 연산자는 ''와 0을 false로 인식 { const name = ''; const userName = name || 'Guest'; console.log(userName); const num = 0; const message = num || 'undefined'; console.log(message); } // .. 2021. 9. 8. 선택적 연결 (Optional Chaining) 복잡하게 if문 사용해서 조건 체크하지 않고 필요한 값만 오류 없이 사용하는 방법이다. 최근 핫한 트렌드로 스위프트 코틀린언어에서도 자주 사용한다. { const person1 = { name: 'Ellie', job: { title: 'S/W Engineer', manager: { name: 'Bob', }, }, }; const person2 = { name: 'Bob', }; // { function printManager(person) { console.log(person.job.manager.name); } printManager(person1); printManager(person2); // job 속성이 없어서 에러 발생 } // 방법1 { function printManager(person.. 2021. 9. 8. 널 병합 연산자 널병합 연산자 ?? : ESNext 자바스크립트와 타입스크립트에서 ?? 연산자를 말한다. name ?? Name() 연산자 앞 변숫 값이 null 또는 undefined라면 연산자의 뒤 Name()을 사용하라는 의미다. ES5 자바스크립트 name || Name()으로 구현한다. 2021. 9. 4. 메트로 서버 Metro server 1. npm i 설치 주의사항 npm start 명령으로 실행한 매트로 서버는 프로젝트의 node_modules 디렉터리에 락을 건다. 이 때문에 매트로 서버가 실행 중이면 npm i 명령으로 패키지를 설치할 수 없다. 그래서 ctrl + c로 매트로 서버를 중지하고 node_modules 디렉토리 락을 잠깐 해제해야한다. 2021. 9. 4. JSX= JavaScript + XML XML(extensible Markup Language): 태그 이름을 자유롭게 지을 수 있는 언어 XML 코드는 마치 자바스크립트나 타입스크립트 문법에 XML 구문이 있는 것처럼 사용 JSX : JavaScript XML 줄임말로 React.createElement 호출 코드를 좀 더 다순 간결하게 만들수 있다. HTML 마크업 언어 : XML 마크업 언어의 부분 집합, 태그나 속성을 마음대로 확장 할수 없다. React.createElement는 컴포넌트를 가상 DOM 객체로 만든다. 컴포넌트는 여러개의 속성과 하나 이상의 자식 컴포넌트를 가진다. 가상 DOM 객체 = createElement(컴포넌트 이름, 속성 객체, 자식 컴포넌트) 표현식: JSX 구문의 자바스크립트 코드는 반드시 return .. 2021. 9. 4. 에러: border color 가 동작 하지 않는 문제 특별히 잘못된 것이 없다면? borderwidth 값을 넣어 줬는지 확인해봐라 2021. 8. 30. IOS 커스텀 폰트 적용 안될때 react-native 0.60 이상 버전에서는 react-native.config.js 파일을 생성한 후에 module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./src/assets/fonts/"], // 당신의 font 파일들이 모여있는 폴더 }; 위와 같이 적어준후 react-native link 명령을 사용하면 자동으로 안드로이드와 ios 둘다 폰트 사용할수 있는 환경이 만들어 진다. ios폴더에 AppDelegate.m 파일을 열어 아래 코드 내용을 추가해준다. for (NSString* family in [UIFont familyNames]) { NSLog(@"%@", family);.. 2021. 8. 30. 기능 개발간 유용한 사이트 json으로 동적 컴포넌트 만들기 https://www.storyblok.com/tp/react-dynamic-component-from-json How to render dynamic component defined in JSON using React With React it is easy to render dynamic components utilizing JSX and React.createElement, which we can utilize to render content with specific components and layouts by only using their name. www.storyblok.com 커스텀 폰트 적용하기 https://dev-yakuza.posstree.com/ko.. 2021. 8. 30. 공휴일 제외하는 함수 만들기 const ExceptWeekend = () => { const today = new Date() let yesterDay = new Date(today.setDate(today.getDate() - 1)) if (yesterDay.getDay() === 0) { yesterDay = new Date(today.setDate(today.getDate() - 2)) } else if (yesterDay.getDay() === 6) { yesterDay = new Date(today.setDate(today.getDate() - 1)) } console.log('!!!', yesterDay) } 2021. 8. 24. 아이폰 시뮬레이터 command + D 안될때 시뮬레이터 메뉴에서 I/O -> Input -> Send Keyboard Input to Device 활성화 2021. 8. 15. 자식 컴포넌트 -> 부모 컴포넌트 상태 변경하기 부모 컴포넌트 state상태와 setState 함수를 자식 컴퍼넌트에 넘겨준다. /* 부모 컴포넌트 */ import React, {useState} from 'react' import type {FC} from 'react' /* 자식 컴포넌트 불러오기*/ import Child from './Child' // 속성 타입 정의 export type Props = { state: D.state } const Parent : FC = ({state: initialState}) => { // 부모 useState 훅 정의 const [state, setState] = useState({ ...initialState, counts: {comment: 0, retweet:0, heart: 0} }) // 자식 .. 2021. 7. 16. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음