Starters Starters

1. git 프로젝트 연결 - 처음 프로젝트를 github에 연결을 위해 github에서 새로운 repository 만들고, git bash 에서 연결할 때 git remote add origin https://github.com/chrismin1205/react-tutorial.git 이런식으로 쓰면 됨 2. git push 오류 처음에 Readme.md 파일을 생성하면, 새로운 프로젝트와 github 내의 상태를 동일하게 맞추어야 한다. - git push 이전에 git pull로 먼저 상태를 맞춰준다. 만약, git push 를 했는데도 계속 오류 발생한다면, remote repo에서 commit을 잃어버려서서 에러가 발생한 것 그냥 강제로 github에 쑤셔넣는 코드 사용 git push -f o..

- 각 계정명 클릭하면 초록색으로 바뀌고, 다시 누르면 다시 검정색으로 변하도록 - App.js - 1. 배열 내의 객체에 각각 변수(active) 추가 const [users, setUsers] = useState([ { id: 1, username: 'starters', email: 'public.starters@gmail.com', active: true, }, { id: 2, username: 'tester', email: 'tester@gmail.com', active: false, }, { id: 3, username: 'jajajojo', email: 'jajajojo@gmail.com', active: false, } ]); - UserList.js - 2. active 변수 추가하고, s..

- UserList.js - 1. userList함수에서 onRemove라는 props 받아온다. function UserList( { users, onRemove }){ 2. onRemove={onRemove} 추가 return ( { users.map( (user, index) => ( ) ) } ) 3. User 함수에서도 onRemove props로 받아와준다. function User({ user, onRemove }){ 4. User 함수에 추가 return ( {user.username}({user.email}) 삭제 ); 5. button에 onClick속성을 통해 새로운 함수 만들어준다. - 파라미터를 넣어주기 위해 onRemove(user.id)}>삭제 6. 만약 계속 user.~~ 이..

1. CreateUser.js 생성 import React from 'react'; function CreateUser( { username, email, onChange, onCreate } ){ return ( 등록 ); } export default CreateUser; - App.js - 코드 추가 import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, em..

지금은 React를 공부하고 있지만, 로드맵의 이전 단계인 5가지를 확실하게 짚고 넘어가야겠다는 생각이 들었다. 1. FetchAPI / Ajax (XHR) 배우기 2. 개념 이해하기 - 호이스팅 - 이벤트 버블링 - 스코프 프로토타입 - Shadow DOM - strict 3. 버전 관리 - 지금도 github, git bash 등을 사용할 줄 알고, 사용하고 있지만, 버전관리가 무엇인지? 왜 사용해야하는지에 대한 질문에는 대답할 수가 없다. 공부하자!! 4. html - 접근성, 기본 SEO 5. 웹 보안 지식 - HTTPS - CORS - 컨텐프 보안 정책 - OWASP 보안 취약점

useState 를 사용하면 값을 변경하고 관리할 수 있다. 하지만 값을 바꿀 때, 컴포넌트가 리렌더링 된다. 하지만 특정 상황에서는 리렌더링 할 필요가 없는 상황이 있음 => useRef 사용 - 값이 바뀔 때 리렌더링 될 필요 없을 때 주로 아래와 같은 때에 쓰임 코드 기존 UserList()의 users 배열을 잘라내고 props로 받아온다. import React from 'react'; function User({ user }){ return ( {user.username}({user.email}) ); } function UserList( { users }){ return ( { users.map( (user, index) => () ) } ) } export default UserList; ..

이렇게 나오게 할 때 비효율적인 방법 import React from 'react'; function UserList(){ const users = [ { id: 1, username: 'starters', email: 'public.starters@gmail.com' }, { id: 2, username: 'tester', email: 'tester@gmail.com' }, { id: 3, username: 'jajajojo', email: 'jajajojo@gmail.com' } ]; return ( {users[0].username}({users[0].email}) {users[1].username}({users[1].email}) {users[2].username}({users[2].email})..

DOM을 가져올 때 React에서 사용하는 법 (getElementById / querySelector 같이) 함수형 컴포넌트에서 하는 방식 이전에 만든 컴포넌트에서 초기화 버튼을 누른 뒤에 초기화를 하고 나서 포커스가 초기화 버튼으로 가 있다. -> React에서는 실행 뒤 포커스를 이름부분의 input쪽에 옮기거나 하는 기능이 없다. => DOM에 직접 접근해야함 DOM에 직접 접근하기 1. useRef 불러오기 import React, { useState, useRef } from 'react'; 2. useRef() 선언 - 이전 코드에 nameInput 변수 추가 function InputSample(){ const [inputs, setInputs] = useState({ name: '', n..