[TIL] 01.19

misinterpriter 프로젝트에서 read more 기능을 만들기 위해 작업을 하였다. 

 

로직은 아래의 순서로 흘러간다. 

1. json객체 속의  각각 이름에 담겨있는 데이터를 하나의 배열로 자르기 쉽게 변환 시킨다. 

2. 변환 시킨 배열을 slice를 통해서 잘라준다. slice에서 자를 부분을 지정해주는 값은 스테이트로 만들어준다. 

3. 해당 배열을 map으로 돌려서 값들을 렌더시켜준다. 

4. read more 버튼을 누르면 자를 부분을 지정해주는 스테이트 값을 변경 시켜 다음 부분을 잘라 렌더하게 만든다. 

 

위와 같은 로직으로 코드를 구성하였는데 몇가지 에러가 발생하였다. 

처음 발생한 에러는 반복되는 값이 렌더가 되는 것이였다. 0~11 까지 값을 먼저 보여주고 버튼을 누르면 12~24까지의 값이 잘려지지만 렌더되는 값은 0~11의 값이 렌더가 되었다. 

수정을 한후에는 다른 값이 렌더가 되긴 했지만 기존의 값을 덮어 씌워 버리는 에러가 발생 하였다. 

뭔가 단단히 꼬여 버린것 같은데 계속해서 원인을 찾아보아야 할것 같다.