본문 바로가기

전체 글

 (90)
React todolist React 를 이용하여 todolist 를 만들었다. 만들면서 사용했던 라이브러리 react react-dom react-router-dom redux styled components uuid react-calendar React를 학습 하면서 알게된 것 변수를 안쓰고 굳이 state를 쓰는이유 component 의 개념 reducer의 역할과 기능 Project 결과물 https://vercel.com/hwan910/react-redux-todolist Dashboard – Vercel The deployment that is available to your visitors. vercel.com Git Hub https://github.com/hwan910/react_redux_todolist
내일배움캠프 Week 7 캠프에 합류하고 한달하고 보름이 지났다. 내일배움캠프와 학점은행제를 병행해서 하다보니 정말 바쁜 시간을 보냈다. 학점은행제가 끝났으니 이제 여유가 좀 생겼다. 다음주 부터 더 열심히 달려보자 !!!
Redux state 수정 리덕스에서는 리듀서에서 state 값을 수정한다. 리듀서 사용법 1.리듀서에게 보낼 명령을 만든다. 2.명령을 보낸다. 3.리듀서가 명령을 받아 이행한다. 리듀서에게 보낼 명령 만들기 리덕스에서 명령을 보낼때는 Action을 사용한다. 즉 리듀서에게 내가 어떤 Action을 하길 원한다 라고 표현하는 것이다. 이러한 행동을 코드로 표현하기 위해서 객체로 만든다. 그래서 이것을 액션객체 라고 한다. 액션객체는 반드시 type이라는 key를 가져야 한다. 왜냐면 액션객체를 리듀서에게 보냈을때 리듀서는 객체안에서 type이라는 key를 찾아서 이행하기 때문이다. // 예시 코드 //number에 +1 을 하는 액션 객체 { type : "PLUS_ONE" }; //리덕스 모듈에 있는 statte를 변경하기 위..
Redux 설치 및 기본 구성 Redux를 사용하는 이유 React 에서 는 여러가지 컴포넌트를 만들고 원하는곳에 꺼내다가 사용하는 구조다. 개발을 하다 보면 state를 사용하게 되는데 다른컴포넌트에서 state를 사용하려면 props 로 전송해서 사용해야한다. 그런데 props는 부모컴포넌트->자식컴포넌트 간에만 전송이 가능하고 자식-> 부모 컴포넌트의 전송은 불가능하다. 그러나 Redux에서는 store 라는 중앙관리소 에 state를 넣어두고 props 전송 없이 모든 컴포넌트가 필요할때 가져다 쓸 수있다. Redux 설치 및 기본 세팅 1. redux / react-redux 라이브러리 두개를 설치한다. //npm ,yarn 아무거나 사용가능 yarn add redux yarn add react-redux 2.폴더 구조 생성..
React import export import export 자바스크립트 ES6 신문법으로 한페이지에 있는 긴 코드를 기능별로 쪼갤때 사용한다. (모듈화 ) 리액트에서도 자주 사용하는 문법으로 컴포넌트, 변수 ,state 등을 파일로 쪼개서 필요할때마다 꺼내서 사용할 수 있다. import export 사용법 1.파일을 만든다. 2.export 한다. // Done.js 파일을 만든뒤 function Done(props) { return ( {props?.list?.title} {props?.list?.content} props.삭제함수(props.list.id)}>삭제하기 props.취소함수(props.list.id)}>취소하기 ); } //export 하였다. export default Done 3.쓰고싶은 곳에서 import 한다. ..
React map() map함수 html이 반복적으로 출현하면 반복문을 이용해서 똑같은 html을 생성할 수 있다. 그러나 React의 JSX에서는 for반복문을 사용할 수 없어 map() 를 대신 사용한다. map함수 사용법 1.map()함수는 자바스크립트의 기본함수로 모든 array자료에서 사용 가능하다. var array = [2,3,4]; array.map(function(){ console.log(1) }); // array에 들어있는 자료수 만큼 반복실행한다. 위와 같은 함수를 사용 하면 console.log(1) 이 3번 실행된다. 2.콜백함수에 파라미터를 넣으면 파라미터는 어레이 안에있는 모든 자료를 하나씩 출력한다. var array = [2,3,4]; array.map(function(a){ console...
React props props 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 props로 전송해서 써야한다. 왜냐하면 컴포넌트 는 함수 이고 자바스크립트에선 다른 함수에 있는 변수(state)를 마음대로 가져다 쓸수 없기 때문이다. function App (){ let [title, setTitle] = useState(['저녁 장보기', '병원 예약', '파이썬독학']); return ( ) } //다른 컴포넌트에서 선언된 state를 사용 했기때문에 에러가 날것임. function Modal(){ return ( { title[0] } 날짜 상세내용 ) } 그런데 컴포넌트 가 부모/자식 관계인 경우엔 state를 자식컴포넌트로 전송 가능하다. 다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트 라고 한다...
React Component React 는 긴 HTML을 태그 하나에 넣어놓을 수 있는 문법을 제공하는데 이것을 Component 라고 부른다. 이걸 이용하면 원하는 곳에 태그 한줄로 꽃아넣을 수 있다. //Component 구조 function App (){ return ( HTML태그들 이렇게 한 덩어리로 만들어서 넣어줘야한다. 3. function App(){} 내부에서 만들면 안되고 밖에서 함수를 만들어야 한다. ->function App(){} 도 컴포넌트 생성문법이다. component 안에 component 를 만들지 않는다. 4. 이렇게 써도 되고 이렇게 써도 된다. 5. arrow function 도 사용 가능하다. function Modal(){ return ( ) } //arrow funciton const Mo..

티스토리툴바