리액트 네이티브 Todolist 메인화면 만들기 기본적으로 Text, TextInput, View등 사용할 태그들은 모두 import해온 후 사용해야 한다. css스타일링 방법엔 inline styling StyleSheet Styled Component Tailwind 등이 있다. 이중에 styled component를 사용했는데 react native에서는 기본 사용했던 styled component가 아니라 emotion native (https://emotion.sh/docs/@emotion/native)를 사용하는게 편하고 호환이 잘 된다. 설치 후 npm install @emotion/react @emotion/native import import styled, { css } from '@em..
투두리스트 안 보고 처음 부터 만들어 보기 우선 npm create react-app . 으로 환경을 만들었다. 1. components 폴더와 css폴더를 만들었다. 2. app.jsx에 Header, Input, Contents, Contents 순서대로 컴포넌트를 선언했다. 3 Header컴포넌트로 헤더를 만들었다. 4 내용을 담을 배열을 todoContents로 선언하고 const[todo, setTodo] = useState(todoContents); 로 state를 선언했다. 5. Contents컴포넌트 안에 Todo,done제목은 active를 통해 삼항연산자로 작성해주고 TodoList컴포넌트를 선언했다. 6. TodoList컴포넌트에 작성하면 나올 내용의 구조를 만들어주고 props로 받..
함수형 프로그래밍 클래스 X 리액트는 사용자가 만들어놓은 jsx코드를 렌더링 하는데, state와 props 의 변화에 따라 동적으로 렌더링을 함! 1. 하위태그에서 props로 컴포넌트를 연결 return div안 여는태그와 닫는태그 안에있는건 하위컴포넌트에서 children으로도 받을수있음(구조분해할당 가능) ㄴ children.props로도 가능 2. 하위 컴포넌트에서 props로 받고 그곳에서 jsx 조작 (props로 받은걸 {???.props}로 받을수도있음) 3. 빈태그를 이용하면 return안에 바로 여러 div설계 가능 4. input안에 value={value} 는 입력값을 뜻함 onchange value를 입력하려면 state에 넣어서 화면을 갱신되게함 onchange로 change가..
react 프레임워크 다른 셋팅들을 아직 다 하기 힘들기때문에 yarn create react-app sample-project로 생성 리액트를 구동할땐 파일들어가서 터미널로 yarn start index는 id를 가진애를 끌어올뿐 모든일은 컴포넌트 안에서 일어남 모든 컴포넌트는 함수 맨위는 import 그밑은 함수 안에 Js들어가는부분 그안에 return으로 jsx들어감 맨 밑에 export 화면을 랜더링 하는 기준 -> props(구조분해할당 으로도 가능), state state는 항상 useState로 묶여있어야함 전개연산자(중요)
배운것 리액트 기본개념, JSX, Props, Component 리액트는 기본적으로 SPA(Single Page Application)를 전제로 하고있다. Component 에선 props를 받는게 자식 그걸 품고있는 상위요소가 부모이다. 마지막부모를 export해준다. JSX 문법에선 class 대신 className 자바스크립트 표현식은 중괄호를 사용하는등 html과 비슷하지만 다른점이 많다. 태그가 비어있다면 />로 닫아줘야지 실행가능. 프로그래머스 N의 배수 고르기: function solution(n, numlist) { return numlist.filter(i => i%n === 0) };
