개발야 기하하자

map?

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const testArr = [ 1, 2, 3, 4];

const mapTest = testArr.map( x => x + 2);

console.log(mapTest); // Array [3, 4, 5, 6];

 이런예제로 사용할 수 있습니다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수는 

callback새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue처리할 현재 요소.

index Optional처리할 현재 요소의 인덱스.

array Optionalmap()을 호출한 배열.

thisArg Optionalcallback을 실행할 때 this로 사용되는 값.

이렇게 있습니다.

보통 저의 경우 currentValue, key 값을 많이 사용합니다.

특히 API 호출을 할 경우 많이 사용하는데

const test = [ 
    {
      testimg: img,
      name: "테스트1"
    },
    {
      testimg: img,
      name: "테스트2"
    },
    {
      testimg: img,
      name: "테스트3"
    },
    {
      testimg: img,
      name: "테스트4"
    },
    {
      testimg: img,
      name: "테스트5"
    },

  ] 
  // 실제로는 API 를 받아 올 값 지금은 목업데이터를 넣어둠)
  
  return( 
  	<View>
    	{test.map((data, index) => { 
    	<TouchableOpacity style={styles.myGroupStyle} key={index}>
    		<View>
    			<Image source={data.testimg}/>
    		</View>
    		<View>
    			<Text>{data.name}</Text>
    		</View>
    	</TouchableOpacity>
    	)
    	})}
    </View>
   )
   
         

이런식으로 react-native에서 사용합니다.

api 호출 후 return 값을 받아 data를 적용할 때 많이 쓰는 것 같습니다!

그리고 저는 map을 사용할 때 test.map((data, index) => 여기 부분에서 test라는 Array를 data로 key값은 index로 해서 사용합니다. 참고로 key값을 안넣어주면 오류가 나니까 넣는 것을 추천드립니다.

// 이메일 체크 정규식
function isEmail(asValue) {

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 핸드폰 번호 체크 정규식

function isCelluar(asValue) {

var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}



//비밀번호 체크 정규식

function isJobPassword(asValue) {

var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 이메일 체크 정규식

function isEmail(asValue) {

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 핸드폰 번호 체크 정규식

function isCelluar(asValue) {

var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

비밀번호 체크 정규식

function isJobPassword(asValue) {

var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

자주 쓰이게 될 것 같아서 공유해봅니다.

저 같은 경우는

출처: https://suyou.tistory.com/150 [수유산장]

www.npmjs.com/package/react-native-image-picker

react-native-image-picker 이라는 라이브러리를 소개 해드립니다!!!!

첫 번째로는 

android/app/main/AndroidManifest.ml 에

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

이렇게 두줄을 

넣어주세요!

그뒤로 코드입니다!

import ImagePicker from 'react-native-image-picker';
 
const [ img, setImageSource ] = useState("");  // 이미지를 img변수에 할당시킬겁니다!

function pickImg() { 
  const options = {
    title: 'Select Avatar', //이미지 선택할 때 제목입니다 ( 타이틀 ) 
    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }], // 선택 버튼을 커스텀 할 수 있습니다.
    storageOptions: {
      skipBackup: true,	// ios인 경우 icloud 저장 여부 입니다!
      path: 'images',
    },
  };

  /**
   * The first arg is the options object for customization (it can also be null or omitted for default options),
   * The second arg is the callback which sends object: response (more info in the API Reference)
   */
  ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      // You can also display the image using data:
      // const source = { uri: 'data:image/jpeg;base64,' + response.data };
      setImageSource(response.uri); // 저는 여기서 uri 값을 저장 시킵니다 !
    }
  });
}

/* return 코드
{img ?   // 이미지가 있으면 라이브러리에서 받아온 이미지로 출력, 없으면 디폴트 이미지 출력!
	<TouchableOpacity style={styles.imgWrapper} onPress={()=>pickImg()}>
		<Image source={{uri: img}} style={styles.imgStyle}/>
	</TouchableOpacity>  
	:
	<TouchableOpacity style={styles.imgWrapper} onPress={()=>pickImg()}>
		<Image source={defaultImg} style={styles.imgStyle}/>
	</TouchableOpacity>
}

                
*/

일단 response 값으로 uri나 data 등등 값이 오는데요 여기서 저는 uri 만 필요하기 때문에 setImageSource에 uri를 

저장하고 img에 넣어서 img로 프로필 사진 받아오는 코드를 작성해봤는데요

const options 에

const options = {

        title: '사진',

        takePhotoButtonTitle: '카메라',

        chooseFromLibraryButtonTitle: '이미지 선택',
		
        cancelButtonTitle: '취소'
        
      };

이렇게 설정을 해두시면 자기가 원하는 텍스트로 커스텀이 가능합니다 ! 

이렇게 이미지를 저장하고 카메라를 찍을 수 있는 라이브러리를 사용해봤습니다~!~!

함수란?

목적이 있는 작업을 하려고 만든 독립적인 블록

javascript에서 코드 집합을 나타내는 자료형

하나의 데이터 타입

객체라고 할 수 있고 변수에 할당 가능함.

구성

1) 함수명

함수 이름입니다! ex) function test() { } ; 에서 함수명은 test입니다.

2) 매개변수

함수에서 전달받은 data를 내부로 전달하기 위해 사용하는 변수입니다.

예를 들면 function test(data) {  console.log(data); } 에서 매개변수는 data입니다. 

3) return 문

함수 실행을 종료하고 return 으로 값을 반환하는 반환문입니다. 객체 포함 모든 타입 값을 반환합니다.

function test () { 
	console.log("hi");
}
 // 라는 함수가 있다고 하면
 
 console.log(test()); // 값은 hi가 콘솔에 찍힙니다.
 
 function test (data) { 
 	console.log(data);
 }
 // 라는 함수가 있고
 
 console.log(test("함수테스트");
 
 //라고 하면 data에 "함수테스트"라는 값이 들어가 "함수테스트"라고 콘솔에 찍힙니다.
 
 변수에 함수를 정의 할 수도 있습니다.
 
 var app = function() { 
 	console.log("테스트!");
 }
 app();
 // 테스트 라고 콘솔이 찍힙니다.
 
 function sum(x,y) { 
 	return x + y;
 }
 
 var dataSum = sum(1,2);
 console.log(dataSum) 은 1+2 = 3이 찍힙니다. 
 
 
 //ES6부터는 arrow function 이 도입되서
 
 var test = () => console.log("test")
 test();
 // test가 콘솔에 찍힙니다!