React 3 Jsx(Javascript Xml) 사용하기

성기현·2024년 6월 5일

React

목록 보기
3/5
post-thumbnail

조건문

부모가 자식을 호출할때 isLogin 이라는 key로 true 의 value 를 전달해주겠다는 뜻이다


JSX 에서는 IF ELSE 문을 안쓴다 <<

그래서 삼항 연산자를 사용


React 에서는 map 이라는 내장함수를 아주 많이 사용함


이렇게 컴포넌트를 두 개 이상 내보낼수 없다 그럴때 사용하는게

함수앞에 그냥 export 를 붙히면 된다.


이렇게 가져다 쓰는 애들은

이렇게 export default 로 내보낸 애들만 이렇게 쓸수 잇다 그래서 다르게 import 를 해야된다

이런식으로 import 중복으로 뒤에 , 찍고 중괄호 {부를 컴포넌트 함수} 라고 하면된다.


map

map : 배열에서 사용하는 js 내장 함수
-> 배열의 모든 요소에 대해 주어진 함수를 호출하고
결과를 새로운 배열로 반환

numbers 에 들어가 있는 배열이 numbers.map 으로 새로운 배열로 만들어서(매개변수 자리엔 넣고싶은 이름) listItems 라고 선언되어있는 변수값에 새롭게 재작성 되서 들어간다

그리고 화살표함수는 한줄일때 {} < 중괄호 생략 가능

이런식으로 listItems 에 값이 들어가 있을 거다


이렇게

배열 listItems 가 배열인데 이걸 풀어서 한번에 쓸라면

이런식으로 중괄호로 감싸고 안에 변수명을 넣어주면된다





Context api

자식 내려꽂기로 계속 사용하면 귀찮고 코드가 길어진다

컴포넌트 트리 전체에 걸쳐 전역적인 데이터를 공유하고 전달하기 위한 방법

해결책

  1. redux
  2. contextAPI

규모가 많이 커지면 contextAPI 로는 한계가 있다 이럴땐 redux 사용



context 는 createContext() 부터 생성해줘야 한다.


export 로 둘다 내보내는 방법 {함수,함수}

여기에 작성한 자식컴포넌트가

일로오고

이 자식들은 theme, toggleTheme 버튼을 사용할 수 있다




업로드중..

value 로 theme 와 toggleTheme 을 사용가능하게 함

1개의 댓글

comment-user-thumbnail
2024년 6월 10일

사진이 많아서 이해하기가 좋았습니다 !!

답글 달기