Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

한바다

리액트 문법 과 네이버콜백 코드설명 본문

React

리액트 문법 과 네이버콜백 코드설명

한바다진화 2024. 8. 1. 21:31

☑️ APP.js 리액트 impot 주의 사항

 

import구문에서 끝단에 'CustomerWrite'파일에 1번 제목과 2번 제목이 똑같아야 한다

그리고 path="" 에 쓰인 제목은 NavBar.js에서 <Link to="">에서 같아야 한다

 

🔸 괄호에 따른 return 사용 유무

const 기능 = () => {
  return 리턴값;  //return 구문이 필수가 아니고, 작성할수 있다는 의미
}

const 기능 = () => {
  //리턴 없음
}

괄호가 {} 시작되면 실행구문으로 return으로 다시 돌아오고
괄호가 () 소괄호이면 돌아올 필요 없다!
또한 map도 열리는 괄호가 { 일 경우 return으로 해주고 ( 일 경우는 return없이 진행한다
[예시구문]
{userList.map((item,index) => {
 return <User key={"user"+ index} user={item} />;
})}

{userList.map((item,index) => (
 <User key={"user"+ index} user={item}/>;
))}

 

public String 추가버튼 {
      return String "자료값";
}
const 추가버튼 = () => {} //return 존재 필수가 아님

public void 추가버튼 {
  System.out.println("안녕하세요.");
}
const 추가버튼 = () => () // return 없음

☑️ 네이버 로그인 등록 컨트롤러 코드 리뷰(발췌)

RestTemplate restTemplate = new RestTemplate();
// RestTemplate는 스프링에서 제공하는 클래스로 RESTful웹서비스를 호출하기 위해 다양한 HTTP메서드
//(GET,POST,PUT,DELETE)를 사용할 수 있게 도와준다. 즉 RestTemplate 객체 생성으로 이 인스튼스를 통해
//HTTP 요청을 보낼 수 있다.

ResponseEntity<String> res = restTemplate.exchange(apiURL, HttpMethod.GET, entity, String.class);
//RestPonseEntity는 HTTP 응답을 나타내는 객체.여기서 String타입으로 응답 본문을 받겠다는 의미
//'res'는 서버로부터 받은 응답을 저장할 변수
//'exchange'메서드는 HTTP 요청을 보내고 응답을 받는 다목적 메서드
//'exchange'메서드 파라미터 'apiURL'은 요청을 보낼 대상 URL,'HttpMethod.GET는 HTTP메서드를지정(여기서는 GET요청을 보내겠다)
//'HttpMethod'는 스프링이 제공하는 HTTP 메서드 열거형(enum)이다.
//'entity'는 HTTP 요청 헤더와 바디를 포함하는 객체
//String.class는 응답을 문자열로 받겠다

//위 두개의 구문에 필요한 import 구문
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.ResponseEntity;
import org.springframework.web.client.RestTemplate;

 

☑️리액트 유저목록들 map으로 불러오는 공식

{유저목록들.map((유저1명,고유번호) => (
 <li key={고유번호}>{유저1명}</li>
)

{[..."홍길동","박말숙","박점자"].하나씩모두꺼내기((꺼낼유저,고유번호) => (
<li key={유저회원가입번호}>{꺼낸유저}</li>

) )}

 

 

'React' 카테고리의 다른 글

console로 에러찾기  (0) 2024.08.06
리액트-스프링부트-DB연결  (0) 2024.08.02
WebConfig,괄호누락,폴더 안불러와짐  (0) 2024.07.31
[스프링부트+리액트]Naver Login  (0) 2024.07.29
405 Method Not Allowed  (0) 2024.07.26