map,foreach 차이점 및 제대로 쓰기

처음 리액트를 시작했을때 여러 블로그들을 전전하며 사람들이 해놓은 그대로 따라했다. 그러다 보니 별 의미 없이 가장 많이 따라했던 기능들 중에 하나가 map 이였다. 대충 배열안에 있는 값을 하나씩 꺼내서 사용할 수 있다 정도로만 알고있어서 그냥 배열원소가 필요할때마다 의심없이 map만 썻다. 그러다 지속적으로 같은 Warning이 나오는 것을 발견했고 모든 기능을 다 완성하고 나서야 왜 자꾸 그 Warning이 뜨는지 알게 되었다. 일단 map과 forEach 사용법이다. map 코드> import React from 'react' const Array=()=>{ const items=["1","2","3","4","5"] const items_map=items.map((data)=>{ return d..

2021.10.06

ApolloServer,GraphQL,Mongoose 연결 후 Mutation문 출력

저번엔 query문을 사용해 보았고 이번엔 이어서 mutation문을 공부해야 겠다. query은 조회기능이고 mutation은 데이터 삽입,수정,삭제 기능을 한다. ApolloServer,GraphQL,Mongoose 연결과 query문 테스트는 아래 게시물에서 진행했고 코드를 이어서 적어본다. https://woojoo-note.tistory.com/10?category=883150 ApolloServer,GraphQL,Mongoose 연결 후 query문 출력 apolloserver 와 graphql을 연동을 위한 셋팅은 아래 게시물을 참고하였다 https://woojoo-note.tistory.com/7 ApolloServer,GraphQL Setting 기본적으로 아래와 같이 설치한다. npm ..

2021.09.13

ApolloServer,GraphQL,Mongoose 연결 후 query문 출력

apolloserver 와 graphql을 연동을 위한 셋팅은 아래 게시물을 참고하였다 https://woojoo-note.tistory.com/7 ApolloServer,GraphQL Setting 기본적으로 아래와 같이 설치한다. npm install apollo-server graphql 서버에서 실행시킬 파일에 아래와 같이 적어준다. typeDefs,resolvers는 grqphql사용시 무조건 들어가야 하기 때문에 임의로 작성했다. type. woojoo-note.tistory.com apolloserver와 graphql이 셋팅된 곳에 mongodb를 사용 할 수 있는 mongoose셋팅을 할 것이다. node.js에 mongoose를 설치하는 명령어를 실행한다. npm install mong..

2021.09.12

State,setState,useState

state = 변수 setState = 변수를 재정의하는 함수 useState = Hook import React,{useState} from 'react'; const State =()=>{ const [test,setTest]=useState('hello world!') console.log(test) return( {test} ) } export default State useState 로 test변수의 초기값을 "hello world!"으로 만들었다 그리고 콘솔에도 출력해보고 화면에도 출력해봤더니 test의 값이 출력됬다. 이번엔 setState를 사용하면 어떻게 될까 import React,{useState} from 'react'; const State =()=>{ const [test,set..

2021.09.07

Context API

Context를 사용하는 이유는 A컴포넌트에서 B컴포넌트로 상태값을 전달하려면 props로 전달하고 받아서 사용하면 되지만 만약 수많은 컴포넌트에 상태값을 전달해야 한다거나 혹은 (A->B->C)구조 일때 A컴포넌트에서 B컴포넌트를 거쳐서 C컴포넌트로 값을 전달해야 한다 하지만 B컴포넌트에서는 해당 값이 필요가 없어도 C컴포넌트에 전달해주기 위해 거쳐가야 한다. 이러니 이런 불필요한 작업을 좀 더 간결하게 사용할 수 있도록 나온것이 Context이다 Context는 전달해야 하는 값들을 따로 저장해 두어 필요로 하는 곳에서 이 Context를 통해 값과 관련된 정보를 가질 수 있다. 먼저 Provider.js이다 Provider는 말그대로 제공자다 값을 제공해준다. context는 createContex..

2021.08.30

ApolloServer,GraphQL Setting

기본적으로 아래와 같이 설치한다. npm install apollo-server graphql 서버에서 실행시킬 파일에 아래와 같이 적어준다. typeDefs,resolvers는 grqphql사용시 무조건 들어가야 하기 때문에 임의로 작성했다. typeDefs에는 Query문,Mutation들에 대한 선언을 한다. 들어가야 할 파라미터들과 출력값으로 어떤 타입으로 할 것인지 작성한다. resolvers에는 typeDefs에 선언한 Query,Mutation문들에 대한 정의를 한다. Query문은 조회만 가능 Mutation문은 조회외의 모든 것들 추가,수정,삭제 실행명령문은 아래와 같다 index.js 대신 실행하고자 하는 파일을 넣으면 된다. node index.js 실행하면 아래와 같이 잘 출력된다.

2021.08.17