본문 바로가기

Frontend

 (28)
[React-Native] Style 연습-웹툰페이지 만들기 여태까지 배운 Props State Style (flex위주) 를 이용해서 네이버 웹툰 페이지 만들기 /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'reac..
[ReactNative] Props 와 State Props React는 다수의 컴포넌트로 이루어져있는 결정체이다. 컴포넌트간 값을 공유하기 위해서 Props객체를 통해 값을 공유한다. php / jsp 에서 GET/POST 방식과 유사 Props를 이용하지 않을 때 class Photo extends Component { render(): React$Node { return ( ); } } const App: () => React$Node = () => { return ( Hello World ); }; Props를 사용했을 때 class Photo extends Component { render(): React$Node { //let 가변적인 내용을 저장하는 변수 let Img = ''; //이미지 링크를 저장해둘 변수 // if (this.prop..
[ReactNative] 컴포넌트 클래스형(class) 컴포넌트 vs 함수형(function) 컴포넌트 클래스형 컴포넌트 ex) class App extends Component { render() { //생략 } } class HelloReact extends Component { render() { //생략 return( //생략 ); } } State사용가능 라이프 사이클 기능 사용가능 임의 method정의 가능 render() 함수 필수 내부에서 보여주어야할 jsx return 함수형 컴포넌트 : 두가지 표현 방식이 있음( 둘은 다름 ) 일반적 함수 선언 방식 화살표 함수 예시) 일반적인 함수 선언 방식 function App() { return 생략 ; } function Hello(props) { return ( Hello {..
[Silicon Mac M1] React Native 설치하기 급하기 때문에 간단하게 본론만 노트북 산지 얼마 안되서 기본 설정부터 시작한다. 1. iTerm 설치 iterm2.com/downloads.html Downloads - iTerm2 - Mac OS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain iterm2.com 최신 릴리즈 버전으로 다운로드 2. Oh my zsh MacOS Big Sur 버전부터 bash가 아닌 zsh를 지원한다고 한다 이거는 사실 설치 안해도 되는데 뭐 유용한 기능도 있다고 하고 나는 설치했으므로 일단 ㄱ i..
[React] 마무리 정리 + 코드모음 생활코딩 : 리액트 편을 보고 작성된 게시글 입니다. 여태까지 게시글 코드 총 정리 App.js import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject" import ReadContent from './components/ReadContent'; import Control from './components/Control'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateConte..
[React] Update, Delete기능 구현 생활코딩 : 리액트 편을 보고 작성된 게시글 입니다. Update , Delete기능 구현 코드 정리 먼저 시작전에 render내의 if-else문으로 content의 내용을 결정짓는 내용이 너무 길기 때문에 다른 함수로 분리한 후 -> getContent(){} _article변수를 return값으로 뱉게하고, _article이 쓰이던 content부분에 getContent() 를 호출하도록 변경 import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject" import ReadContent from './compo..
[React] Create기능 구현 생활코딩 : 리액트편을 보고 작성된 게시글 입니다. React 만을 이용하여 READ/CREATE/UPDATE/DELETE 구현가능! Read : 이전까지 계속 해오던 기능! Create / Update / Delete 목표 1단계 버튼 컴포넌트 만들기 링크와 버튼으로 버튼 제작 App.js render()함수 내 버튼을 만들기를 원하는 부분에 추가 create update 주의* : delete기능은 링크로 구현하지 않는 것이 좋음 컴포넌트로 만들어주기 컴포넌트 명 : src/component/ 경로상에 Control.js파일을 만들어서 컴포넌트를 제작 Control.js import React, { Component } from 'react'; class Control extends Component..
[React] Event 생활코딩 : 리액트 편을 보고 작성된 게시글입니다. 동적으로 발생하는 event 표현하기 prop, state를 모두 사용! EVENT State를 이용하여 상태를 확인하고, 상태에 따라 prop값을 변경하여 동적인 페이지를 만들기 목표 를 해주는 event표현하기 1단계 : State를 부여하고 그에 따라 props값을 변경해주기 State & render() React에서는 State의 값이 변경되면, 변경된 State값을 가지는 Component들의 render()함수 (+ 그 하위의 Component들의 render()함수) 들이 다시 호출됨 render() 어떤 HTML을 그리는지 결정함 즉, State가 변경되면, render()함수가 재 호출된다는 의미는 State나 props의 값이 변경되..
728x90

티스토리툴바