React native 쓰려면 react 의 간단한 개념을 알아야한다고 해서 아주 짧게 이것저것 봤었습니다.
코딩애플님의 유튜브 강의 입문용으로 간단하게 정리해볼까 해용
근데 저는 html/css/js 했었고, 지금 하는건 react native고
react는 맛보기로 쓱 보고 필요한건 구글링해서 배워서 이걸로 참고하시면 안됩니당
React 간단 개념정리
- 코딩애플 유튜브
무료버전은 앞부분이고 나머지는 강의 결제해야됩니당 저는 무료버전만 봤어요
변수
- 변수 넣고 싶으면 {} 중괄호 (= 데이터 바인딩)
style = {{스타일명 : '값'}}
return()안에는 병렬로 <>2개 이상 기입 금지.
state
state
1. import {useState}
2. let [a,b] = useState('남자 코트 추천')
a: state 에 보관했던 자료 나옴
b:state 의 상태를 변경을 도와줌
destructuring 문법
let [a,c] = [1,2];
왜 state 써야함?
=> state 를 변경해도 자동 재랜더링됨
자주 변경될거같은 html부분은 state로 만들어놓기!
이렇게 useState를 배열 형태로 쓸수도 있어용
글제목[0,1,2]
- 함수를 만들어야되긴 함. 또는 함수를 빼지 않고 onclick = { () => { console.log(1) }}
(화살표 함수)
버튼에 기능 만들기
1. onClick 쓰는법
onClick={}안엔 함수 넣어야함
2. state 변경함수(새로운 state)
따봉변경(새로운 state)
state 가 array/object 라면?
state 변경함수 특징
기존 state == 신규 state 의 경우
변경 안해줌
ㅋㅋㅋㅋ빡대가리식 정리 넘 좋아요
[...머시기] 로 만들기
div 너무 많으면 component
컴포넌트 만드는 법
1. function 밖으로 빼서
function 작명() {
return()
}작명은 대문자로 시작하기!
2. return() 안에 html 담기
3.<함수명></함수명> 쓰기
이렇게 원하는 위치에
<Modal>컴포넌트를 배치해주면 됨
병렬을
<div>두개 하고 싶으면 <> <> 를 만들어주기
어떤걸 컴포넌트로 만들면 좋은가?
1. 반복적인 html 축약할때
2. 큰 페이지들
3. 자주 변경되는 것들
컴포넌트의 단점 : state 가져다쓸 때 문제생김
cf ) 컴포넌트 만드는 문법2
let Modal = () => {
return (
<>
)
}props
코딩애플에는 없었지만 , react native 공식문서 튜토리얼에는 props가 나와있기에 생활코딩 짧은 영상 참고했습니다.
링크텍스트
우리가 만든 컴포넌트가 속성을 가지면 어떨까? => prop
App 함수 안에서
<Header title="WEB">Header 함수(props) 안에서
{props.title}로 {}변수 만들어준다음에 가져옴
1.html 2. css 3. javascript 리스트를 속성을 부여해주고 싶다.
- const topics로 함수 내에서 변경 불가하게 const 로 만들어준다.
- return 에서
<Nav topics={topics}></Nav>로 Nav 컴포넌트에 전달
3. 빈 lis= []만들어주고 push하기
4. lis 로 return
