플랑크톤
1k
2020-06-02 04:56:07
5
297

리액트에서 HTML태그에 접근하려면 어떻게해야할까요?


맨밑에 보이는 a태그에 접근을 하고싶은데요..

document.getElementById("front")로 접근을해서 콘솔로 찍어보니 null 이 나오고

document.getElementsByClassName("front")로 접근을하니 HTMLCOLECTION이 나오네요..


window.onload를 사용하면 null이 안나오고 데이터가 잘 받아와지긴 하는데..

제가 App.js에서 받아온 state값이 바뀔때마다 조건문으로 style을 바꿔주려고 하는데

window.onload를 사용하면 바뀌지가 않아서요.. 어떻게 해야할지 모르겠습니다..


저 밑에있는 a태그에 접근을 하려면 어떻게 해야할까요..?


0
  • 답변 5

  • 페코옹
    643
    2020-06-02 07:15:57
    리액트는 실제 dom이 아니라 가상 dom을 사용해서 말씀하신것처럼 태그이 접근하시면 안돼요.
    귣이 하시려면 ref 사용하는 빙법이 있는데 그러지 마시고...
    일단 리액트 홈페이지가서 개념 먼저 보시고 툐토리얼 있는데 그 튜토리얼 한 번 잘 읽으시면서 따라가보세요
  • 카시와기유키
    498
    2020-06-02 07:34:50

    조건부 스타일은 getElementById 없이도 가능합니다. 또한 그걸 안 쓰는 것이 권장됩니다.

  • 바람종
    1k
    2020-06-02 08:57:31 작성 2020-06-02 08:58:48 수정됨

    https://ko.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
    태그의 직접 접근은 위 링크 설명 처럼 가능하지만 남용 하지 말아 달라는 경고와 함께 적혀있습니다.

    질문자님의 케이스는

    https://ko.reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components

    위 방법으로 간단하게 해결 가능한 문제기 때문에 위 링크를 참고해서 작업하시면 되겠습니다.

    그리고 리액트 컴포넌트는 되도록이면 리액트 생명 주기에 따라서 작업을 하시는게 좋습니다.

    onload말고

    https://ko.reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

    위 링크와 같은 생명 주기를 이용하는걸 추천드립니다.

  • 페코옹
    643
    2020-06-02 10:29:42

    이런 부분은 사실 홈페이지만 시간내서 잘 읽어도 자세히 나오는 내용이에요.

    그냥 cra해서 되는대로 코딩하시다가 안좋는 코딩 습관 몸에 익을 수 있으니 리액트가 뭐고 어떻게 사용하고 홈페이지에 한글로 잘 설명되어있으니 꼭 보세요.

  • 플랑크톤
    1k
    2020-06-02 20:35:35

    해결했습니다 감사합니다!

  • 로그인을 하시면 답변 을 등록할 수 있습니다.