반응형 리액트기초3 리액트 3 기초 / 알아야할 것들 (2) array map concat filter 삼항 조건 연산자 array 리액트에서 array는 진짜 중요하다. 리액트를 제일 리액트스럽게 쓰는게 물론 state 값을 이용해서 onChange 해서 막 state 값을 리액트답게 설정하는 것도 있겠지만 리스트를 array로 다루면서 값들을 자르고 붙이고 하는 것도 리액트스러운 부분중에 하나인 것 같다. map const list = ['커피','물','주스']; return ( {list.map((item,index) => { return( {index+1}. {item} ) }) } ) list를 각 항목별로 한번씩 돌리는게 map이다. 돌릴때 각 순번과 콘텐츠를 하나씩 가져올 수 있는데 그래서 위와 같이 설정하면 아래와 같은 화면이 나온다. 1. 커피 2. 물 3. 주스 const list = [{'음료':'커피.. 2021. 7. 30. 리액트 2 기초 / 알아야할 것들 (1) function형 / Class형 / 주요 Hook useEffect / useState / event 개념 import React from 'react' 일단 리액트를 쓰기 위해서는 리액트를 임포트 해야한다. 리액트에서는 다른 컴포넌트나 여러 라이브러리를 이런 형태로 임포트 해온다. 단 컴포넌트의 경우에는 from 뒤에 컴포넌트 이름과 함께 경로를 입력해야 한다. 같은 폴더 안에 있는 컴포넌트라면 './Component'라고 쓰고 같은 폴더 내 따로 components 폴더에 들어있는 컴포넌트라면 './components/Component'라고 쓰고 상위 두 폴더 위에 있다면 '../Component'라고 쓰고 상위 세 폴더 위에 있다면 이거때문에 많이 햇갈렸었는데 점을 세개를 쓰는게 아니라 두개씩 두번 써야한다. '../../Component' 이런식으로. 왜인지는 모르겠지만 세개는 인식을 안한다고 한다. .. 2021. 7. 21. 리액트 1 시작하는 법(설치 프로그램 / 링크) 전 회사에서 리액트를 하다가 이직 후 제이쿼리만 하다보니 리액트를 다 잊어버렸다. 오랜만에 다시 리액트를 해보니 정말 많이 잊어버렸다는 것이 실감나서 혼자서 정리해보는 리액트 기초. 어떻게 리액트를 시작해야 하는지 리액트를 하기 위해 뭘 알아야 하는지 적어본다. 다른 리액트 관련 문서들도 많으니 여기서는 잊지 말아야 할것들 위주로, 그리고 실제 리액트 돌아가게 하기 위해서 처음에 시작하는 부분은 자세히 적어보려고 한다. 먼저 리액트를 위해서 VSCode를 깔아야 한다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on .. 2021. 7. 19. 이전 1 다음 728x90 반응형 LIST
