https://deahan.tistory.com/426
[React] 272샘의 React6 (JSX)
https://deahan.tistory.com/425 [React] 272샘의 React5 (개발 폴더 파일 구조)https://deahan.tistory.com/417 [React] 272샘의 React4 (Node 웹서버)https://deahan.tistory.com/416 [React] 272샘의 React3 (NODE NPM 이해)https://deahan.tistory.
deahan.tistory.com
를 읽었다면
MyComponent.jsx 를 아래 처럼 고치고, 낯선 { }에 호기심 시선을 주장.
function MyComponent() {
const matchTitle = "흑백개발자 코드전쟁";
const e7e = "E7E" ;
const minux = "Minux";
const hold = "보류";
return (
<div style={{ border : "4px solid pink"}}>
<h1>{matchTitle}</h1>
<h2>{e7e} 백개발자!! {minux} 흑개발자!!</h2>
<h2>1:1 {hold}!!!</h2>
</div>
)
}
export default MyComponent
결과 영상을 눈에 보냈다면 (npm run dev), 아마 느낌이 또 찾아 왔을 것이다..
느낌을 정리하면 JSX 사이에 { }를 넣으면 자바 스크립트로 인식하나
정도일 것이다.. 훌륭하다. 그렇다! (단 지금은 제약사항이 있다라고 기억하자)
[ 아직 타이밍이 깊이 들어가면 기피 현상이 발생할 확률이 높은 시점이다 ]
MyComponent.jsx 를 아래처럼 고치공 다시 한번 결과 영상을 체크!
function MyComponent() {
const myFriends = [
{ fid: "f001", name: "미누", age: 45, feature: "미눅스" },
{ fid: "f002", name: "카리나", age: 24, feature: "로켓 펀치" },
{ fid: "f003", name: "경민", age: 24, feature: "삼쏘에 노래" },
{ fid: "f004", name: "e7e", age: 29, feature: "이미티콘" },
];
const myEnemies = [];
return (
<div style={{ border: "5px groove gold" }}>
{!myEnemies.length && <h1>아직 적은 안 나타남</h1>}
{myFriends.length &&
myFriends.map((friend) => (
<h3 key={friend.fid}>
{friend.name}는 {friend.age}살 {friend.feature}
</h3>
))}
</div>
);
}
export default MyComponent;
React에선 && ( and 연산) 이 아주 많이 습관적으로 사용되는 표현식이다.
&& 앞의 표현이 true일 때만 && 뒤의 표현이 실행 되는 데, 아래와 같은 코드를
if(!myEnemies.length){
/* 실행 코드 */
}
if(myFriends.length){
/* 실행코드 */
}
&& 를 이용하여 절약한 경제적 코드라 생각하면 된다.
배열.map은 배열의 개별 요소의 값을 변형 시킬 때 사용하는 메소드 인데,
매개변수로 콜백함수가 온다.
배열관련 메소드도 아주 많이 사용되는 데, 그 중에
map, filter, reduce, sort등은 절대적으로 필요하다.
더불어 callback(콜백)함수에 대한 이해도 꼭 필요하다.
위 배열 메소드들은 모두 callback함수를 매개변수로 사용한당.
2023.06.09 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 12 (콜백함수 callback)
2023.06.15 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 20 (prototype 프로토타입)
글을 꼬옥 읽고, 확인하고 오자!(100% 이해는 아니어도, 감은 잡고 와야 한다)
분명 읽지 않았거나, 몰겠어요 라는 그들이 있을것이다.
index.html이 있는 위치(폴더)에 아래 파일을 만들고, 소스를 차분히 읽어내리자!
mapCheck.html
<!DOCTYPE html>
<meta charset="UTF-8" />
<h1>console창을 확인</h1>
<script>
// function 키워드를 class의 의미로 사용
// 자바스크립트 표현으로는 생성자 함수로 사용되었다는 뜻
// class는 변수명 첫글자를 대문자로 함
const MyArray = function () {
this.length = 0;
return this;
};
// push 메소드 억지 필요로 구현
MyArray.prototype.push = function (pElem) {
this[this.length] = pElem;
this.length++;
return this; // 리턴값으로 this를 넘겨주면 메소드 체이닝
};
// 관심 대상 map 메소드 구현
MyArray.prototype.map = function (pCallback) {
for (let i = 0; i < this.length; i++) {
this[i] = pCallback(this[i], i);
}
return this; // 메소드 체인닝
};
const wordArr = new MyArray();
wordArr.push("민우").push("e7e").push("미눅스").push("7e7");
// 개별 배열요소 값 조작시 사용
wordArr.map(function (word, index) {
if (!index) return `${index}번째 ${word}`;
return `MINUX ${word}`;
});
console.log("체크: ", wordArr);
</script>
현재 브라우져 주소는 http://localhost:5173 인데
http://localhost:5173/mapCheck.html 로 바꾸어 아래와 같은 결과를 확인!
map 메소드는 정말 널브러지게 쓰니... 결국은 이해도가 상승할꺼다.
React는 자바스크립트로 이루어져 있기 때문에,
위 내용에 대해 전혀 감이 없다면 개인적인 생각은 더 진행 될리가 없다.!(감 1개라도...)
[ 화이팅 하자!~~, 조금 감을 잡고 계속 쓰면 손에 결국 붙는다! ]
MyComponent.jsx 를 아래처럼 고치공 다시 한번 결과 영상을 체크하자!
function MyComponent() {
const myFriends = [
{ fid: "f001", name: "미누", age: 32, feature: "미눅스" },
{ fid: "f002", name: "카리나", age: 24, feature: "로켓 펀치" },
{ fid: "f003", name: "경민", age: 29, feature: "삼쏘에 노래" },
{ fid: "f004", name: "e7e", age: 19, feature: "이미티콘" },
];
const myEnemies = [];
return (
<div style={{ border: "5px groove gold" }}>
{!myEnemies.length && <h1>아직 개발 재밌음</h1>}
{/* if(){} */
/* JSX 안에서 if문은 안되서 미안해요 */}
{myFriends.length &&
myFriends.map((friend) =>
friend.name == "경민" ? (
<h3
key={friend.fid}
style={{ backgroundColor: "green", color: "pink" }}
>
{friend.name}이는 {friend.age}살 {friend.feature}
</h3>
) : (
<h3 key={friend.fid}>
{friend.name}는 {friend.age}살 {friend.feature}
</h3>
)
)}
</div>
);
}
export default MyComponent;
http://localhost:5173 결과 화면은 아래와 비슷!
포인트를 알면 소스 의도가 보인다.
JSX안에 if문을 쓸 수 없다는 것이다
그리하여 조건? 참일때 실행문: 거짓일때실행문 형식의 삼항연산자를 썼다
소스를 다시 보장. 의미가 의미심장하게 심장에 의미를 남긴당.
[ if(){} 양쪽의 주석 /* */ 을 풀면 빨간 밑줄이 사용할 수 없음을 알려준다. ]
출처 : https://e-7-e.tistory.com/255
