TestDome React Image Gallery App

실행되었을 때의 모습

문제의 요구사항을 살펴보자.

이미지와 함께 X버튼이 존재하고 X버튼을 누르면 해당하는 이미지가 삭제되는 형태다.

1. 이미지 리스트

2. remove 버튼 눌렸을 때 삭제되게 ( 코드의 아랫쪽을 보면 첫번째 링크는 생성되자마자 remove가 클릭되게 되어있음)

 

links라는 props를 전달하고 links는 배열형태.

이 말은

  <div className="image">
    <img src="여기에 링크를" />
    <button className="remove">X</button>
  </div>

Jsx에서는 class 말고 className을 그리고 img 태그도 꼭 닫아줘야한다.

class ImageGallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = { links: props.links };
    this.remove = this.remove.bind(this);
  }
  remove = (url) => {
    this.setState((state) => ({
      links: state.links.filter((l) => l !== url)
    }));
  };
  render() {
    const links = this.state.links;

    return (
      <div>
        {links.map((link, key) => (
          <div key={key}>
            <div className="image">
              <img src={link} />

              <button className="remove" onClick={() => this.remove(link)}>
                X
              </button>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");
const links = ["https://bit.ly/3lmYVna", "https://bit.ly/3flyaMj"];
ReactDOM.render(<ImageGallery links={links} />, rootElement);
document.querySelectorAll(".remove")[0].click();
console.log(rootElement.innerHTML);

state에 links를 만들고 그리고 props로 받아온 links를 할당한다.

그리고 x를 눌렀을 때 수행할 remove함수도 생성해준다.

우리가 가지고 있는 정보는 links 배열의 element 밖에 없으므로 이걸로 어떤 이미지를 지울지를 결정한다.

이 link를 remove의 파라메터로 넘겨주면 remove는 이를 url로 받아와서 links의 배열과 비교해서 같지 않은것만 filter로 걸러낸다.

filter는 조건에 맞는 element를 모아 다시 배열로 뱉어내는데 따라서 내가 삭제를 누른 url과 다른 url들만 모아서 뱉어낼 것임.

이걸 setState로 업데이트 시키면 삭제되는 효과.

button에다 onClick에 remove함수를 연결했다.