[React] 동적 내용 목록 렌더링

좋습니다. 이 항목에서 사용자가 단추를 눌렀을 때 변화하는 동적 데이터 목록을 보여 주고 싶은 항목이 있습니다.이것은 어떻게react에서 이루어졌는지 보여 줍니다. 이것은 매우 간단합니다. 이것은 상태의 사용과 관련이 있을 수 있습니다.

나는 내가 준비한 매우 기본적인 항목을 사용하여 이 주제를 설명할 것이다.사용자가 텍스트를 입력하고 화면에 보여 줄 수 있는 간단한react 프로그램
전체 원본 코드here를 보십시오. 왜냐하면 저는 전체 프로젝트를 어떻게 구축하는지 토론하지 않았고 동적 데이터 목록의 표현만 토론했기 때문입니다.

프로젝트 구조

차체

차체.js

주체.css

카드

카드.js

카드.css

애플리케이션js

색인.js

스타일.css

카드 - 다른 구성 요소를 배치하고 보호하는 구성 요소(내 이름이 안 좋을 것 같아)

import "./Card.css";

const Card = (props) => {
  const classes = "card " + props.className;

  return <div className={classes}>{props.children}</div>;
};

export default Card;

The children prop is a default prop that returns whatever is the component encapsulates. In this case it will return the other components that are encapsulated by the Card component and put them in a div

대상 - 동적 데이터 목록을 처리하는 구성 요소입니다.

import Card from "../Card/Card";
import "./Goal.css";

const Goal = (props) => {
  return (
    <div>
      {props.items.map((indiv) => (
        <Card className="set-goal" key={indiv.key}>
          {indiv._output}
        </Card>
      ))}
    </div>
  );
};

export default Goal;

This component takes the list of dynamic content as a prop(items which will be a state) and encapsulates the all of the items in the list with the Card component.

주체 - 다른 구성 요소를 조합하여 응용 프로그램의 주요 구성 요소를 형성한다.

const goalsList = [
  {
    key: 0,
    _output: ""
  }
];

// TESTING STYLED COMPONENTS LIB, GOAL INPUT IS A COMPONENT WITH ITS OWN UNIQUE STYLING
const GoalInput = styled.input`
  background-color: ${(props) => (props.invalid ? "bisque" : "transparent")};
  border-color: ${(props) => (props.invalid ? "red" : "beige")};
  border-width: 1px;
  width: 85%;
  height: 1.5rem;

  &:focus {
    outline: none;
  }
`;

const Body = () => {
  // STATES USED IN THE APP
  const [goals, setGoals] = useState(goalsList);
  const [isValid, setIsValid] = useState(true);

  // CALLED WHEN THE TEXT IN THE INPUT ELEMENT CHANGES
  const validGoalsInput = (event) => {
    if (event.target.value.trim().length > 1) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  };

  // CALLED WHEN THE USER CLICKS THE ADD BUTTON
  const addHandler = () => {
    let goalText = document.getElementById("goalText");
    // UPDATE THE LIST OF GOALS STATE IF THE INPUT ISNT EMPTY/WHITESPACE OR JUST A CHARACTER
    if (goalText.value.trim().length > 1) {
      if (isValid === false) {
        setIsValid(true);
      }
      setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });
      goalText.value = "";
    } else {
      setIsValid(false);
    }
  };

  return (
    <div>
      <Card className="card-body">
        <div className="goals-text">My Goals</div>
        <div>
          <GoalInput
            invalid={!isValid}
            type="text"
            id="goalText"
            onChange={validGoalsInput}
          />
        </div>
        <div className="goals-button">
          <button onClick={addHandler}>Add Goal</button>
        </div>
      </Card>
      <Goal items={goals} />
    </div>
  );
};

export default Body;

내용의 '목록' 을 보여 주려고 가상 그룹 goalsList 을 만들었습니다. 그 중 js 대상이 있습니다.배열은 동적 내용 목록을 저장하는 상태의 초기 값으로 사용됩니다.그것은 key와 _output 속성이 있다.key 속성은 최선의 실천일 뿐입니다. React가 목록을 효율적으로 나타낼 수 있도록 사용할 것입니다._output 속성은react 프로그램에서 입력한 텍스트를 포함합니다.
다음 코드는 주제에 대해 중요하지 않다.외부 라이브러리styled components를 어떻게 사용하는지 알려 주세요.Body 부분에 직접 들어가서 우리는 두 가지 상태 변수를 정의했다.

goals - The state which holds our dynamic list

isValid - This state will be a boolean which tells us if what the user inputted is valid

이제 다른 코드를 건너뛰고 Body 구성 요소의 구조로 바로 이동합시다.

return (
    <div>
      <Card className="card-body">
        <div className="goals-text">My Goals</div>
        <div>
          <GoalInput
            invalid={!isValid}
            type="text"
            id="goalText"
            onChange={validGoalsInput}
          />
        </div>
        <div className="goals-button">
          <button onClick={addHandler}>Add Goal</button>
        </div>
      </Card>
      <Goal items={goals} />
    </div>
  );

코드 자체를 보면 구조가 분명해야 한다. GoalInput 는 styled component 에 봉인된 양식화된 구성 요소 (사용 Cardlib 생성) 일 뿐이다.
그것은 동적 조형에 사용되는 도구invalid가 필요하다.
이것은 isValid 상태의 값에 따라 입력 요소에 언제 다른 스타일을 추가할지 결정합니다. 이 상태는 사용자가 입력한 내용이 유효한지 알려 줍니다.
요소의 값을 변경하면 onChange 이벤트가 트리거됩니다.

const validGoalsInput = (event) => {
    if (event.target.value.trim().length > 1) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  };

사용자가 입력한 것이 비어 있는지, 문자가 비어 있는지, 공백이 있는지에 따라 isValid 상태의 브리 값을 설정하는 이벤트 처리 프로그램을 호출하고 있습니다.
그 다음에 Goal 구성 요소는 우리의 동적 목록을 처리하고 간단한 단추가 있으며 이벤트 처리 프로그램addHandler이 있어서 클릭할 때 사용하도록 설정되어 있습니다.

const addHandler = () => {
    let goalText = document.getElementById("goalText");
    // UPDATE THE LIST OF GOALS STATE IF THE INPUT ISNT EMPTY/WHITESPACE OR JUST A CHARACTER
    if (isValid === true) {
      setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });
      goalText.value = "";
    }
  };

우선, 우리는 id를 통해 입력 요소를 가져와 변수에 저장한 다음 isValid 속성이true로 설정되었는지 확인합니다. 이것은 입력 요소의 현재 내용이 유효하다는 것을 나타냅니다.
유효하면 goals 상태를 업데이트합니다.현재 위조 값을 제외한 첫 번째 실제 내용을 추가하고 있는지 확인합니다. 만약 그렇다면, 우리는 하나의 그룹만 되돌려줍니다. 이 그룹은 위조 값을 덮어쓰는 항목만 포함합니다.

return [
            {
              key: 0,
              _output: goalText.value
            }
          ];

그렇지 않으면, 새 항목과 상태의 이전 값을 포함하는 그룹을 되돌려줍니다. 새 데이터로 goals 상태를 업데이트합니다.그런 다음 가져온 요소의 값을 지웁니다.

return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];

When you're updating a state and you're depending on the current value of the state before it is updated, you should wrap the entire update process in a function which takes a parameter; the parameter being the current value of the state.

setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });

전체 업데이트 과정은 매개 변수prevGoals의 함수에서 어떻게 진행되는지 주의하십시오goals상태는 아이템Goals으로 item부품에 전달됩니다.
구성 요소 사용 map() 응용 프로그램 Card 구성 요소, 이 구성 요소는 설정 스타일의 유일한 클래스를 가지고 있습니다.key 아이템은 기본 아이템이며, 기본적으로 구성 요소에 사용할 수 있습니다.이런 장면에서 우리는 하나의 수조/내용 목록을 보여 주어야 한다.이것은 React로 하여금 목록을 효과적으로 보여 주고, 그룹의 모든 항목에 특정한 유일한 표식을 제공할 수 있게 한다.
버튼 도구가 없으면 모든 것이 정상적으로 작동할 수 있지만, 일부 성능 손실이 있을 수 있습니다. (대형 응용 프로그램에서 우리의 응용 프로그램은 너무 작아서 성능 문제에 주의할 수 없습니다.)
관건적인 도구에 대한 더욱 깊은 해석은 아래의 문장에서 찾을 수 있다

React에서 키템의 중요성 파악🗝

프랑코 다레시오・ 4월 1일 20일・ 6 분 읽기

#webdev #react #javascript