CodeTech/React (19) 썸네일형 리스트형 React - [깊은 복사 얕은 복사, 상태변수와 반환형 함수] 투레벨 프로젝트를 진행하고 있다. 그런데 문제가 생겨서 아무리 생각해도 이유를 찾지 못해서 다른 문제들 부터 해결하고 다시 도전해봤다. 문제 const removeToCart = (title) => { if (cart.length === 1) { setCart([]); window.localStorage.removeItem('cart'); return } setCart(cart.filter(product => product.title !== title)); console.log(cart); window.localStorage.setItem('cart', JSON.stringify(cart)); } 페이지를 만들고 있는데 오른쪽의 장바구니 페이지에서 상품 remove 버튼을 누르면 AddToCart컴포넌트.. React - [컨디셔널 렌더링, Router의 url로 변수 넘기기, React Hook Form, Context] 컨디셔널 렌더링 - 조건부 렌더링이라고도 하며 삼항연산자, if else 구문등으로 특정 조건을 만족하면 컨포넌트의 렌더링을 다르게 구현하는 방식이다. - 페이지와 코드를 줄이며 일부분만 렌더링 함으로서 페이지를 꾸밀수 있는 SPA(Single Page Application)을 지향한다. 이러한 삼항 연산자로 조건부 렌더링을 통해 다른 화면을 노출시킬수 있다. Router의 url로 변수 넘기기 - Router의 url에 key를 넣고 Link to = 'url'로 변수를 넘기면 해당 Router로 연결되는 컴포넌트에 해당 변수가 넘어가서 기능하게 된다. index.js에서 해당 url에 :page라는 key를 붙여놓고 HeaderLogin.js 컴포넌트에서 Link to로 url을 연결할 때 key(:.. React - [naming] react에서 여러파일을 만들면 반드시 네이밍을 하게 된다. 네이밍에 따라서 여러파일들의 용도와 쓰임 그리고 속성까지도 추측이 가능하고 헷갈리지 않기 때문에 네이밍은 매우 중요하다. React 기준이므로 참고만한다. - 보통 디렉토리 파일명은 소문자로 한다. - CamelCase로 작명한다. - 디렉토리자체가 react 컴포넌트가 바로들어 있는 폴더라면 폴더이름을 대문자로 시작할 것, - 직접적으로 바로 react컴포넌트가 들어있지 않은 간접적인 관계의 폴더라면 소문자 단수로 표기 - loginSection2 같은 불분명한 의미는 짓지 않는다. 명확한 이름으로 표시를 한다. 어쩔수 없이 길어져도 괜찮다. components - 재사용 가능한 컴포넌트 - 다양한 곳에 사용가능한 범용가능한 컴포넌트 comp.. React - [onclick - history] history - 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지 기록을 알 수 있기 때문이다. - 리액트에서 Router는 path를 이용해서 라우팅할 컴포넌트를 지정해주는데 이때 라우터는 해당 컴포넌트에게 props로 history를 넘겨준다. 이러한 history는 여러 객체를 담고 있는데 {length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …} action: "PUSH" block: ƒ block(prompt) createHref: ƒ createHref(location) go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() length: 2.. React Hooks - 1 [useState, useEffect, useRef] React Hook ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org hook이라는 개념이 나온이유 react는 컴포넌트를 재사용하려면 사용자가 어느정도까지 재사용을 할 것인지, 어느 부분을 재사용하는지 명시해 놓지 않는다. 따라서 여러 패턴이 필요하며 패턴을 사용할 때마다 컴포넌트를 재구성하는 것이 필요하고 이렇게 변경된 코드들은 같은 일을 하지만 다른 모습을 하고 있기에 코드를 추적하기어렵다. 특히나 컴포넌트의 생명주기와 관련되어서는 상태변화에 따라서 해당 함수가 만들어진 목적과 다르게 사용되는 경우가 매우 많다. 예) componentDi.. ReactNative - 3 [배포] Expo 배포 ReactNative를 배포하는 것은 expo에서 할수도 있고 app store나 andriod market에서 할수도 있다. 여기서는 expo에서 배포하는 것만 언급하고 추후 app store에 올리는 방법을 설명하겠다. 정말 매우 간단한데, expo 에 회원가입을 하고 아이디가 있으면 위의 보라색 버튼만 누르면 알아서 배포가 된다. 이후에 다른사람들이 이앱을 써보려면 expo 홈페이지에 들어가서 위 사이트를 보면 왼쪽아래 Scan to open 이라는 곳이 있다. 이 코드를 휴대폰 카메라로 스캔하면 해당앱이 열린다. 물론 휴대폰에는 expo가 깔려 있어야 한다. expo.io/@doodream/projects/NativeProject NativeProject on Expo 현재 날씨와 .. ReactNative - 2 [View] Text - 이전까지는 이러한 것들을 써왔다면 React Native에서는를 사용한다. 마찬가지로 View - 이러한 것들은 안에 다 들어와야한다. 브릿지 규칙 때문이다. React Native에서는 css 규칙을 적용할수도 있는데 이는 stylesheet api를 구현해놨기 때문이다. 몇몇 규칙은 적용이 안되지만 대부분은 적용이된다. 안되는 규칙들 같은 경우에는 실제로 해보고 에러메세지를 참고하자 px은 안되서 %로 해보라고 메세지가 뜬다. 그렇게 고쳐보면 적용이 된다. 이런식이다. react styelsheet api에서만 특이하게 적용되는 규칙들을 보면 1 .flexDirection : column - 기본 값이 column으로 들어간다. - 가로로 하고 싶으면 row로 해줘야한다. 원래 css에서.. React Native - 1 [설치] React Native - 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.[3] 안드로이드[4], iOS, 웹[5], UWP[6]용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다 즉, react로 모바일 앱을 만들때 사용한다. react로 모바일 앱을 만들게 해주는 프레임 워크라고 할수 있다. 개발환경은 - 모바일 기기에 expo client 설치 - node 설치 - npm 설치 - expo-cli 패키지 설치 (react native의 react-create-app같은 명령어 이다.) macbook@Macbookui-MacBookPro ~ % npm install -g expo-.. 이전 1 2 3 다음
