본문 바로가기

분류 전체보기

 (165)
공부기록, 2021-08-05(react localstorage) - react localstorage ``` import React, { useState } from "react"; const LocalStorageComponent = () => { const [userName, setUserName] = useState(""); const [check, setCheck] = useState(false); const saveData = () => { const userObj = { name: userName }; window.localStorage.setItem("userName", JSON.stringify(userObj)); }; const callData = () => { setCheck(true); }; const onChange = (e) => { setUs..
공부기록, 2021-08-04(react 기본구조) - recoil 사용예제 - recoil 기본구조 ``` //atom const buttonClickCountState = atom({ key: 'buttonClickCountState', default: 0, }); //selector const buttonLabelState = selector({ key: 'buttonLabelState', get: ({get}) => { const count = get(buttonClickCountState); return `${buttonClickCount}번 클릭함`; }, }); //component function button() { const [buttonClickCount, setButtonClickCount] = useRecoilState(buttonC..
공부기록, 2021-08-03(recoil 사용예제) - recoil 사용예제 - recoil count Atom 세팅 ``` import { atom } from 'recoil'; export const countState = atom({ key: 'countState', // 해당 atom의 고유 key default: 0, // 기본값 }); ``` - count 를 보여주고 변경하는 컴포넌트 작용 ``` import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil'; import { countState } from '../../recoil/count'; function ReadWriteCount() { const [ count, setCount ] = useRecoilS..
공부기록, 2021-08-02(recoil기본세팅) - recoil 기본세팅 ``` import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; // recoil 추가 import './index.css'; import App from './App'; const app = document.getElementById('root'); ReactDOM.render( , app ); ```
공부기록, 2021-07-30(react) import React from "react"; import { SafeAreaView, StyleSheet, TextInput } from "react-native"; const UselessTextInput = () => { const [text, onChangeText] = React.useState("Useless Text"); const [number, onChangeNumber] = React.useState(null); return ( ); }; const styles = StyleSheet.create({ input: { height: 40, margin: 12, borderWidth: 1, }, }); export default UselessTextInput;
공부기록, 2021-07-29(react) - react문법 - 1. Flew - A와 B가 Flex:1, Flex:2 라고 지정한다면 1:2로 영역을 나눠갖는다고 보면된다. - 2. flexDirection - 자리잡은 영역의 방향을 지정해준다. (row : 가로 , Column : 세로) 기본값은 Column 이다. - 3. justifyContent - 이 속성은 flexDirection 과 동일한 방향으로 정렬해주는 역할을 한다. (속성값 : flex-start, center, flex-end, space-between, space-around → flexDirection 의 row, Column 값에따라 가로,세로 방향으로 정렬이 된다.) - 4. alignItems - 이 속성은 flexDirection 과 반대방향으로 정렬해주는 역할..
공부기록, 2021-07-28(expo) 1. Flew 상대적인 값이라고 보면된다. 예를들어, Conatainer 영역안에 A 와 B라는 영역이 있다고하면 Conatainer 에 Flex :1 이라는 영역안에 A와 B가 Flex:1, Flex:2 라고 지정한다면 1:2로 영역을 나눠갖는다고 보면된다. 2. flexDirection → 자리잡은 영역의 방향을 지정해준다. (row : 가로 , Column : 세로) 기본값은 Column 이다. 3. justifyContent → 이 속성은 flexDirection 과 동일한 방향으로 정렬해주는 역할을 한다. (속성값 : flex-start, center, flex-end, space-between, space-around → flexDirection 의 row, Column 값에따라 가로,세로 방..
공부기록, 2021-07-27(react) react데이터 전달 ``` import React, { Component } from "react"; import PhoneForm from "./components/PhoneForm"; class App extends Component { handleCreate = (data) => { console.log(data); } render() { return ( ); } } export default App; import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: "", phone: "", } handleChange = (e) => { this.setState({ [e.target.name]:..

티스토리툴바