분류 전체보기 (73) 썸네일형 리스트형 react-native example project for Beginner URL https://blog.nerdjfpb.com/project-ideas-for-react-native-beginners-to-expert/ react-native 시작방법 맥에서 react-native 앱을 개발하는 방법 Expo CLI 앱 개발에 자주 사용되는 네이티브 기능 (위치 정보, 카메라 등)을 패키로 묶어서 제공 단점 사용하지 않는 네이티브 모듈 => 앱 파일 사이즈 커질 수 있음 Expo에서 제공하지 않는 네이티브 모듈 추가 시, 불편 React Native CLI React Native CLI 개발을 위해 필요한 도구 Homebrew 맥용 패키지 관리자 Node.js 자바스크립트의 런타임 react-native가 자바스크립트이므로 Watchman 특정 폴더, 파일을 감시하다가 변화가 생기면 특정 동작을 실행하도록 설정하는 역할 react-native에서 소스코드의 추가, 변경이 발생 => 다시 빌드하기 위해 Watchman 사용 React Native CLI.. Flex flex와 inline-flex는 차이는 단순합니다. display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며, display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다. 여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의합시다. 두 값의 차이는 내부에 Items에는 영향을 주지 않습니다. 참고 URL heropy.blog/2018/11/24/css-flexible-box/ styled-components styled.div div를 스타일링 styled.input input을 스타일링 예제 polished의 스타일 관련 유틸 함수 사용 yarn add polished flex와 inline-flex는 차이는 단순합니다. display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며, display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다. 여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의합시다. 두 값의 차이는 내부에 Items에는 영향을 주지 않습니다. useEffect useEffect Hook의 종류 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트 됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) 파라미터 첫 번째 : 함수 두 번째 : 의존값이 들어있는 배열 (deps) 배열의 값이 변경될 때도 useEffect( ) 호출되게 함 Redux Redux 사용 이유 Root컴포넌트 밑에 H컴포넌트의 onDoSomething함수 : something값을 변화시키는 함수 Root컴포넌트 밑에 F컴포넌트에 something값 있음 onDoSomething : Root -> B -> H로 전달 H에서 이벤트 발생 somethig : Root -> A -> E -> F로 전달 따라서 비효율적 리덕스가 효율적 리덕스 구조 개념 정리 액션 상태에 어떤 변화가 필요할 때 사용되는 객체 type필드는 필수적으로 가져야함 액션 생성 함수 액션을 만드는 함수 리듀서 변화를 일으키는 함수 두 가지의 파라미터 받음 =>새로운 상태를 만들어서 반환 state 현재 상태 action 전달받은 액션 스토어 모든 상태 관리 state값을 보유 리듀서에 의해서만 state값 .. CSS 스타일링 방식 일반 CSS 컴포넌트를 스타일링하는 기본적인 방식 Sass CSS 전처리기 CSS문법을 사용하여 CSS코드를 더욱 쉽게 작성 CSS Module CSS 클래스가 다른 CSS 클래스의 이름과 충돌 방지 파일마다 고유한 이름을 자동으로 생성해줌 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식 스타일 작성과 동시에 스타일 적용된 컨포넌트 만들 수 있음 Scss (Sass) 자주 사용하는 스타일 시트들을 변수처럼 관리 utils 함수 분리하기 자주 사용될 수도 있는 Sass변수 및 믹스인을 별도의 파일로 분리 @import로 서로 다른 css파일 불러올 수 있음 sass-loader 설정 커스터마이징 .../을 어렵게 하지말고 ~로 쉽게 node_modules에서 불러.. 개념 정리 액션 상태에 어떤 변화가 필요하면 액션이라는 것이 발생 반드시 type 필드를 가지고 있어야 함 액션의 이름 필수 리듀서 변화를 일으키는 함수 액션을 만들어서 발생 => 리듀서 : 현재 상태, 전달받은 액션 객체를 파라미터로 받음 => 두 값을 참조하여 새로운 상태로 만들어서 반환 예제 const initialState = { counter : 1 }; function reducer(state = initialState, action) {//현재 상태, 액션객체를 파라미터로 받음 switch(action.type) { case INCREMENT : return{ counter : state.counter + 1//새로운 상태를 만들어 반환 }; default : return state;//새로운 상태를 .. Hooks useState 정의 상태 값 관리 예제 import React, {useState} from 'react'; const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); const onChangeName = e => { setName(e.target.value); }; const onChangeNickname = e => { setNickname(e.target.value); }; return( 이름 : {name} 닉네임 : {nickname} ); }; export default Info; 이름, 닉네임 받는 코드 useEffect 정의 리엑트 컴포넌트가 렌더링될 때마다 특.. Component의 라이프 사이클 메서드 개요 클래스형 컴포넌트에서만 사용가능 했으나 리액트의 발전으로 함수형 컴포넌트에서도 사용 가능 (함수형 컴포넌트에서 Hooks를 통해 라이프 사이클 제어 가능) 라이프 사이클 메서드 마운트 정의 페이지에 컴포넌트가 나타남 DOM 생성되고, 웹 브라우저상에 나타나는 것 종류 constructor( ) 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps( ) props에 있는 값을 state에 넣을 떄 사용하는 메서드 render( ) 준비한 UI를 렌더링하는 메서드 componentDidMount( ) 컴포넌트가 웹 브라우저 상에 나타난 후, 호출하는 메서드 업데이트 정의 컴포넌트 정보를 업데이트 업데이트 시기 props, state가 변경될 때 부모 컴.. 이전 1 2 3 4 ··· 8 다음
