React(리액트) 티키타카 7 (블락 기호 {} 사용)

React

by e7e 2024. 10. 2. 14:55

2024.09.30 - [React] - React(리액트) 티키타카 6 (JSX)

를 읽었다면 음.. "먼가 쪼메 재밌는데" 라는 느끼미 이써쓸꼬시당.

MyComponent.jsx 를 아래 처럼 고치고, 낯선 { }에 호기심 시선을 주장.

function MyComponent() {
  const matchTitle = "흑백개발자 계급전쟁";
  const e7e = "E7E";
  const minu = "미누";
  const win = "승";

  return (
    <div style={{ border: "4px solid pink" }}>
      <h1> {matchTitle} </h1>
      <h2> {e7e} 좋앙! 미누 시롱!</h2>
      <h2>
        근데 2:0 {minu} {win}
      </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: "선주", 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의 의미로 사용
  // 자바스크립트 표현으로는 생성자 함수로 사용되었다는 뜻
  const MyArray = function () {
    this.length = 0;
    return this;
  };

  // push 메소드 억지 필요로 구현
  MyArray.prototype.push = function (pElem) {
    this[this.length] = pElem;
    this.length++;
    return 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("선발").push("선수").push("선주");

  // 개별 배열요소 값 조작시 사용
  wordArr.map(function (word, index) {
    if (!index) return `${index}번쨍 ${word}`;
    return `E7E ${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: 45, feature: "왜 미누?" },
    { fid: "f002", name: "카리나", age: 24, feature: "로켓 펀치" },
    { fid: "f003", name: "경민", age: 24, feature: "삼쏘에 노래" },
    { fid: "f004", name: "선주", age: 29, 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(){} 양쪽의 주석 /* */ 을 풀면 빨간 밑줄이 사용할 수 없음을 알려준당. ]

다음 글은 언제? 왜? 주제는? 궁금하당.. 나동... 또 볼 수 있을깡?

엄마는 오데 가썽?

아마 곗돈 타러 가셨을 껄!~~

엄마도 에스파 좋아행?~~

몰랑~~! 부엌에 과일 깍는 칼있나 찾아봥!

지금 TV에 카리나 나왔는뎅~~

뎅! 데엥! 뎅뎅뎅........(침묵.....)

https://www.youtube.com/watch?v=nFYwcndNuOY

'React' 카테고리의 다른 글

React(리액트) 티키타카 9 ( Props 구조 분해 ) (1)	2024.10.03
React(리액트) 티키타카 8 ( Props 이해 사용 ) (4)	2024.10.02
React(리액트) 티키타카 6 (JSX) (2)	2024.09.30
React(리액트) 티키타카 5 (개발 폴더 파일 구조) (0)	2024.09.30
React(리액트) 티키타카 4 ( Node 웹서버) (2)	2024.09.26