🚀 React

복잡한 태그들을 모아 하나의 그룹으로 만든 후 그 태그 사용하기.컴포넌트 만들기함수형으로 만들어야 하고 대문자를 사용해야 함function Header(){ return (내용) }정의한 태그를 필요한 곳에 가져다 붙이기<Header> <Header/>

컴포넌트에 속성을 장착해줌. 리액트에서는 속성을 Props라고 부른다.ex)<img src="image.jpg" width="100" height="100">내용을 가지고 있는 props 만들어주기. function(props). \*(props)는 object이

Props는 부모 컨포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있는 방법 아래 예시로는 App() 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 보내는 것  일단 버튼을 두개 만들어볼까 버튼이 두개 생겼지만 디자인이 너무 구리니 디자인을 넣어보자! SavBt

useState는 자료 저장 기능임 (변수랑 비슷하다고 보면 됨)저장하고 싶은 자료를 state (""); 소괄호 안에 넣어줌const title , setTitle 을 사용 하면 State에 저장된 자료를 가져다가 쓸 수 있음\-> 출력 "내용" title을 출력

✏️ 버튼 기능 개발하기 좋아요 버튼 & 갯수 UI 만들기 html에 버튼 추가하기. button 태그는 안예쁘니까.. span 태그로 묶어주고 귀여운 임티 추가. 그리고 옆에 좋아요 갯수 표현해주는 부분에 0 적어주기 근데 생각해보니 따봉을 계속 누르면 숫자가 올

안에 글이 3개 들어있으면 글제목변경('치마추천', '바지추천', '원피스추천') 이런 식으로 변경이 가능하지만 만약 100개가 넘는 제품이 있다면 막막..그러니 기존 state를 다 복붙하지 말고 기존 state 첫 글자만 살짝 바꿔서 state변경함수에 집어넣는

똑같이 생긴 UI들을 반복문으로 줄여주는 방법모든 array 자료에는 이렇게 map을 붙일 수 있음. 기본 함수라 생각하면 됨그리고 그 뒤에는 콜백 함수를 넣어줌어려운건 아니고.. 그냥 소괄호 안에 들어가는 함수들을 전부 다 콜백 함수라고 함그래서 이게 어떤 역할을 함

자식이 부모의 state 가져다 쓰고 싶을 때는 props를 사용하면 됨.함수 안에서 만든 모든 변수는 함수 탈출 불가임..그래서 아래 a라는 변수도 다른 함수에서 가져다 쓸 수 없음이 때 props 문법 쓰면 가능App 컴포넌트 안에 Modal 컴포넌트가 있는 상황.

return에서는

input 태그에 number 타입에서 maxlength가 먹히지 않는다 🧐서치후 찾은 방법!input에 아래 코드를 추가한 뒤 maxlength={ }를 입력해주면 된다. 최종 코드완성!

🏻 useEffect는 언제 사용할까? 어떠한 컴포넌트가 마운트(화면에 첫 렌더링) 되었을 때, 업데이트(다시 렌더링) 되었을 때, 언마운트(화면에서 사질 때) 되었을 때 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 됨 🏻 useEf

면접을 보며 Native를 써봐야겠다는 생각이 크게 들었다.🤔 프로젝트 코드 리뷰도 하고있고 시간이 부족하다 부족해.. 네이티브를 빠르게 사용해보고 싶은 마음에 VSCode를 사용하여 환경설정을 하였다. 테스트용으로 진행 하는 방법이라는데 후딱 찍어먹어보고 시뮬레이터

native의 기본 코드 구성. 처음 보는 View, Text, StatusBar, StyleSheetViewreact native는 웹사이트가 아니기 때문에 div 대신 View를 사용해야 한다. (div 쓰면 에러 팡팡)View는 container라고 생각하면 된다

https://www.reactnative.dev/React native documentation을 찾을 수 있는 사이트. 상단 Development 카테고리에서 Component 를 클릭하면 Core Components를 확인할 수 있다.왼쪽 리스트를 보면

궁금증 : React Native 기본 코드에 Expo StatusBar와 React Native StatusBar가 왜 있을까? StatusBar가 두개가 있는게 궁금하다.이유는 Expo가 react native의 일부 components와 APIs를 복제하고 개선하

react native 정복기. Layout System에 대해 공부해보자-RN에서 레이아웃을 만들려면 Flexbox를 사용해야 한다. flexbox 복습할 계획이었는데 이렇게 다시 한번 공부하게 되는구나몇가지 예외를 제외하면 React Native의 flexbox는

컴포넌트 내부에서 코드를 작성한다.컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.컴포넌트 태그 사이에 값이 있을때 'children'이란 예약어를 사용한다.

Drawer Navigator은 Left side가 default이다.오른쪽으로 바꾸고 싶어서drawerPosition: 'right' 을 해주었더니 위에 햄버거 아이콘은 그대로 왼쪽에 있고 열리는 것만 오른쪽에서 열리게 됨.DrawerToggleButton을 impo

iOS에서는 스크롤이 잘 내려가는데 Android에서 엄청 천천히 스크롤이 된다. 죙일 내려야함.검색하다 TouchableWithoutFeedback 로 묶어주면 된다는 정보 입수.상단에 import도 꼭 해주기!import {TouchableWithoutFeedbac