> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/mini-project/part-1/undefined.md).

# 리스트에서 특정 요소에 접근(Ref)

리스트 렌더링에서 Ref 객체를 사용해서 특정 요소에 접근할 때 아래와 같이 사용한다. 

```javascript
class AppNavigation extends React.Component {
  // Ref 객체 생성 
  listRef = React.createRef()
  
  componentDidMount() {
    // 렌더링 이후 시점에 접근을 해야 current에 참조된 요소가 할당 된다.
    console.log(this.listRef.current)
  }

  render() {
    const { items } = this.context.navigation
    return (
      <>
        <ul className="resetList">
          {items.map(({ link, text }, index) => {
            return (
              <li key={index} id={index}>
                <a
                  // index와 비교해서 원하는 인덱스에 listRef 객체가 참조되어 current에 요소가 담기도록 한다. 
                  ref={index === 0 ? this.listRef : null}
                  href={link}
                >
                  {text}
                </a>
              </li>
            )
          })}
        </ul> 
      </>
    )
  }
}
```

![item\[0\] 접근 성공 ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MV0o3788zQruMBqGAli%2F-MV0soRdl_A4dJhZX5LB%2Fimage.png?alt=media\&token=2de89e69-6fa8-4937-bb34-4fcd971c4daf)

{% hint style="info" %}
**실수 (주의!)**

계속 index와 비교하는 것이 아닌 객체에다 비교를 하려고 하니 console.log에 null이 나왔다. 반복문의 index와 비교하는 것! 잊지말자!&#x20;

```javascript
ref={this.listRef.index === 0 ? 'firstLink' : null}
```

{% endhint %}